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
vish
(Vish)
July 14, 2020, 1:17pm
2
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.
vish
(Vish)
July 14, 2020, 4:05pm
4
can u share the published link for me to debug?
vish
(Vish)
July 14, 2020, 4:20pm
6
Try this.This works.
$( document ).ready(function() {
$(“.tab”).click( function(){ var tabs_offset = $(“.tabs-content”).offset();
scrollTo(tabs_offset.left, (tabs_offset.top - 150));
});
});
vish:
$( 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
vish
(Vish)
July 15, 2020, 1:19am
9
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
sephoferro
(Joseph ferrari)
May 15, 2021, 2:02pm
11
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;
sephoferro
(Joseph ferrari)
May 15, 2021, 2:04pm
12
wrap the code in style tags
Naisha
(Naisha Gupta)
June 20, 2021, 10:49pm
13
Hey, How do I set my tab panels overflow to scroll?
sephoferro
(Joseph ferrari)
June 22, 2021, 12:46am
14
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.
vish
(Vish)
November 15, 2022, 10:14am
16
hey can u share the published link?
vish
(Vish)
November 24, 2022, 10:34am
18
Hey
The script u added is not correct . 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));
});
});
rebel1
(Robert Rebel)
November 28, 2022, 11:09pm
19
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
(Vish)
December 2, 2022, 9:24am
21
You still have errors in ur code.