Anchor links not working with custom code

Design help Animations & Interactions
1

Hi guys,
So I found this custom code in order to implement scroll snapping and it works beautifully, exactly what I want. The sections are contained within a wrapper in order for the code to work. The problem is my anchor links cannot work in it’s current state. I removed the sections from the wrapper and the anchor links worked just fine. I was hoping someone who is really awesome might have a solution for me.

here is my Read-only link.

Here is my public share link:

https://preview.webflow.com/preview/page-scroll-test?utm_medium=preview_link&utm_source=designer&utm_content=page-scroll-test&preview=d8e05820e71ada74ac5ffdfa51c26109&workflow=preview

2

Hey Ryan,

Unfortunately it seems like having the sections in the snap-scroll-wrapper doesn’t play nicely with being able to actually link to them in Webflow. Check out this thread for more details: Page Section Link Not Functioning - #11 by adrianoresende

3

I haven’t had a chance to look at your page, but I’m going to guess that you want to use the script rather than custom CSS because it supports a numeric indicator on the right-hand side of the page?

Webflow’s section linking feature only lists top-level elements with IDs.

So you have a few options.

Implement your own scroll snapping CSS, and sort out your own numeric indicator.
I haven’t tested this at all, but I’d try making the body the scrolling container, so that the children are targetable by Webflow’s section nav feature.

Untested gpt-css;

body {
  /* This enables scroll snapping */
  scroll-snap-type: y mandatory;

  /* This is needed to make the container scrollable */
  overflow-y: scroll;
  height: 100vh;
}

.section {
  /* This makes each section a snap point */
  scroll-snap-align: start;

  /* This is just for the example, adjust as needed */
  height: 100vh;
}

Another option is to stop using section nav, and instead explicitly nav to the ID you want e.g.;

/#my-section

This will navigate you however it doesn’t have the smooth scrolling.
CSS might fix that too;

html {
  scroll-behavior: smooth;
}

Or you can code your own scrolling mechanism using script.

4

Thanks Michael,
I really know nothing about code language, so I’m finding resources all over the interwebs. Where or how would I implement the code you provided? Currently, I have custom code in the HTML Embed Code Editor

<style>
.scroll-snap-wrapper {
	scroll-snap-type: y mandatory;
}
.section-1 {
	scroll-snap-align: start;
}
</style>
5

Using an HTML embed will work, but it might affect your designer experience.
I’d put it in the page’s HEAD custom code area, or site wide if you want it on all pages.

1 Like