How to build a sticky tabs menu which scrolls to the top on tab change (Webflow)
Memberscripts needed
Tutorial
Cloneable
Why/Use Cases
- Improve UX by automatically scrolling to the beginning of the tabbed content when switching between tabs.
Building a sticky tabs menu that scrolls to the top when changing tabs on a Webflow site
If you’ve got longer tabbed content on your page, you’ll naturally want the page to scroll back up to the beginning when users switch between tabs.
This guide will help you build a sticky tabs menu and add the scrolling functionality on your site.
To build a sticky tabs menu and add the scrolling functionality on your Webflow site, we’re going to use MemberScript #134 – Scroll to Top When Tab Changes. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
Once you’ve created your tabbed content, all you need to do on the page itself is add the following attribute to the tab menu itself:
· ms-code-tab-scroll-top=”-25”
The value is the number of pixels above (negative value) or below (positive value) the tabs menu where the page will scroll to. This can be especially useful if you have a sticky nav menu on your site and don’t want the tabs menu hidden behind it, which is why we’re using 25px in our example.
If you set the value to 0, the page will scroll to exactly the beginning of the tabs menu.
Making it work
Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #134 custom code to your page, before the closing body tag.
Conclusion
That’s everything, you can now go ahead and test the tabs on your live site.
If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.
Our demo can help you create a sticky tabs menu that automatically scrolls to the top of the tabbed content when users click on a tab.
Take me to Cloneable!
Written by
Ovidiu
Contributor