Make tabs scroll to top of content

Hey,

I have a sticky tab element on my page. When I scroll through the content on and then click another tab the new content of that tab is not brought to the top. I originally was doing this we buttons and anchor ID’s but not I see tabs don’t support that… Can anyone help please?

Also how does one get their tabs to behave like the rest of their elements in containers if you cannot set tab elements within containers? You can see the issues on this page when changing viewport sizes.


Here is my site Read-Only: https://preview.webflow.com/preview/kats-gd-public-one?utm_medium=preview_link&utm_source=designer&utm_content=kats-gd-public-one&preview=0e01223717f13c729c5f0c6d13931308&pageId=5f047640a558709b62e28a7b&mode=preview

Custom code for tabs on click and moving the content to top

$(“.tab”).click( function(){
var tabs_offset = $(“.tab”).offset();
scrollTo(tabs_offset.left, tabs_offset.top);
});

For tabs to behave like containers you can just add the same styling as u do for containers.

Hey @vish! Thanks for your response! Apply this before tag? Is there any renaming involved? It seems like this is not working after I publish.

can u share the published link for me to debug?

@vish Heres the published link: https://www.getdigs.io/new-faq-copy

Try this.This works.

$( document ).ready(function() {

$(“.tab”).click( function(){ var tabs_offset = $(“.tabs-content”).offset();

scrollTo(tabs_offset.left, (tabs_offset.top - 150));
});

});

Hmmmm still no luck with this either

This seems to work for me on this page

https://www.getdigs.io/new-faq-copy

Is there any chance of this being included as a feature any time in webflow? Seems like a no-brainer for the tab to scroll to the top when clicked.

1 Like

You can do this without any code. Set a height for the tabs content ( e.g. 80vh ) and set overflow to hidden. Then set your tab panels overflow to scroll. This way each tab panel has its own scroll state. you can use custom code to hide the scrollbars if you don’t want them.

/* width */ ::-webkit-scrollbar { width: 0px; } /* Track */ ::-webkit-scrollbar-track { background: #FFF; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; } body { -webkit-font-smoothing: antialiased; } body { overflow: -moz-scrollbars-none; -ms-overflow-style: none; } :root{ scrollbar-width: none !important; } body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

wrap the code in style tags

Hey, How do I set my tab panels overflow to scroll?

Hi Naisha,

You can set it in the size options.


Set the “tabs content” element to hidden and then set the"tabs panel" element to scroll. Let me know if that doesn’t make sense.

hey @vish, I can’t get it to work on my website and was wondering what I did wrong. Best wishes, Nik

https://preview.webflow.com/preview/plattenkiste22?utm_medium=preview_link&utm_source=dashboard&utm_content=plattenkiste22&preview=52d99983e27735ff0ce3d35c64302926&workflow=preview

hey can u share the published link?

@vish https://plattenkiste22.webflow.io/

Hey

The script u added is not correct :slight_smile: . There is a console error on your page.This is what i see

$( document ).ready(function() {

(“.tab”).tab_link( function(){ var tabs_offset = (“.tab-container”).offset();

scrollTo(tabs_offset.left, (tabs_offset.top - 150));
});

});

it should be this if you are using the same classes.

$( document ).ready(function() {

$(‘.tab’).click( function(){ var tabs_offset = (‘.tab-container’).offset();

scrollTo(tabs_offset.left, (tabs_offset.top - 150));
});

});

Is there a chance that Webflow will ever add this as a feature. It would seem obvious that clicking the tab would cause it to scroll to the top.

@vish still doesn’t work :man_shrugging:

You still have errors in ur code.