Scroll Snap to Section Site – Menu Links

Design help Custom code
1

Hi all,

I’ve built a site using scroll to snap to section custom code:

style>
.scroll-snap-wrapper {
scroll-snap-type: y mandatory;
}
.insight {
scroll-snap-align: center;
}

This is working wonderfully, but I’m struggling to get webflow’s Nav links and other links (custom mobile menu & link blocks) to scroll to the sections even though they are identified correctly in the settings.

Screenshot 2024-06-28 at 14.57.03
Screenshot 2024-06-28 at 14.57.033524×2168 603 KB

Has anybody encountered this before and know of a fix, or can help me out? I just need to finalise this while the client makes changes to the copy and then I’m good to go.

The share link is https://preview.webflow.com/preview/praetorian24?utm_medium=preview_link&utm_source=dashboard&utm_content=praetorian24&preview=195b67c32c120da33704458d01438df8&workflow=preview

If the amazing Webflow community can help me out that would be most excellent!

Tom

2

Hello @tombourne,
Yeah snap scroll doesn’t work in Webflow because Webflow adds some javascript code to add smooth scrolling to all the sites. You can disable that with the following code:

var Webflow = Webflow || [];
Webflow.push(function() {
  //DISABLE WEBFLOW SMOOTH SCROLL
  $(function() {
      $(document).off('click.wf-scroll');
  });
});

I tested the code in the browser and it works, but it doesn’t scroll to the sections it just goes to the top of each section. That might not be the behavior you are looking for, maybe you can try a javascript library like scrollifyJS, that will allow you to scroll to each section using an anchor link and snap scroll between sections. I hope this helps!