Is there a way to have each tab in Webflow default to the top when clicked, instead of opening midway down the page scroll?
Published on
September 22, 2023
Yes, in Webflow, you can easily make tabs default to the top of the page when clicked, instead of opening midway down the page scroll. To achieve this, you can use custom code, specifically JavaScript, to adjust the scroll position when a tab is clicked.
Here's a step-by-step guide on how to accomplish this:
- Add a custom attribute to each of your tabs:
- Select each tab element on your page.
- In the "Settings" tab of the element panel, click on the "+" button next to "Add Custom Attribute."
- Enter the attribute name as "onclick" and leave the value field empty.
- Create a custom code embed for the page:
- Add a new "Custom Code" element to your page's footer or before the closing
</body>tag. - Click on the "Settings" tab of the element panel, and select the "Custom Code" tab.
- In the "Before
<body>tag" or "Before</body>tag" section, paste the following JavaScript code:
<script> // Get all tab links on the page var tabLinks = Array.from(document.querySelectorAll('.w-tab-link')); // Add a click event listener to each tab link tabLinks.forEach(function(tabLink) { tabLink.addEventListener('click', function(event) { // Prevent the default click behavior event.preventDefault(); // Scroll to the top of the page window.scrollTo(0, 0); }); });</script>- Publish or export your site:
- Once you're done adding the JavaScript code, publish or export your Webflow site for the changes to take effect.
With this custom code in place, each tab in Webflow will now default to the top of the page when clicked.
Additional Questions:
- How can I make my Webflow tabs scroll smoothly to the top position?
- Can I use this method to make tabs default to a specific position other than the top of the page?
- Is there a way to animate the scroll transition when a tab is clicked in Webflow?
