Does anyone have a fix for this?! thanks
Hey all,
My site is all built within one tabs block and each tab is scrollable. I noticed that when I scroll down the page on one tab, then switch to another tab, it opens midway down the page scroll. Is there any way to have each tab default to the top when clicked instead?
Thanks in advance!
Here is my site’s published link: LINK
Here is my site Read-Only: LINK
@almanac you need to change the event and the target of the animation like this:
$(".w-tab-link").on("click", function() {
$('html, body').animate({scrollTop:0},500);
})
In your case I would recommend adding a class to all of your nav tabs that is the same rather than the default “.w-tab-link” as this will fire on all tabs across the site (since they all have that class by default. So maybe make a class called “.nav-tab” or something even it is empty and then update that code.
@sam-g is it okay if it is a combo class? I added the tag “tab-nav” to all of the tabs in the menu and put in the footer code as follows but no luck getting it to work.
$(".tab-nav").on("click", function() {
$('html, body').animate({scrollTop:0},500);
})
@almanac you need to wrap the code inside tags like this:
<script>
$(".tab-nav").on("click", function() {
$("html, body").animate({scrollTop:0},500);
})
</script>
And yes, inside a combo class is fine.
@sam-g Ah. Wonderful it worked! Thank you so much I’ve been looking for a solution to this for quite some time.
Maybe I’m asking too much here as I knew there would be some drawbacks to designing within tabs but I noticed when you scroll down and click a new tab you can see the tab start to scroll up before the page changes. And on mobile the tabs disappear for a brief moment when the script is activated. Is there any way you can think of to smooth this out a bit?
Very much appreciated!
@almanac - you can adjust the timing or the animation. The timing is in milliseconds and is the 500 number in the animation. You could also look into other types of animations using jQuery.
Hi Sam, I am a bit confused. I have the same problem but don’t understand where to put the custom code. Would I add an embed element or add this to the code of the page?
@adergazarian - you can add it in the footer code on the page you need it or in the settings for the entire site. It just depends if you need that function on multiple pages.
Hello Sam this is working great except in one place on my site - the Art section. There I have the tabs starting below the top of the page and I am wondering if I can have this scroll to top of page behavior be a scroll to top of tabs behavior. Hope that makes sense, see my link: https://preview.webflow.com/preview/john-hanacek-portfolio?utm_medium=preview_link&utm_source=dashboard&utm_content=john-hanacek-portfolio&preview=f7e836de83231c2206239f3c900368ae&mode=preview
@jjh111 - I’m not 100% sure I understand your request, but you can change the target of the scroll top function:
<script>
$(".navigation-item").on("click", function() { //click target is .navigation-item
$(".div-block-top").animate({scrollTop:0},500); // scroll target is .div-block-top
})
</script>
It doesn’t look like you have a class on your tab section currently (outside of the default Webflow .w-tabs class which will be on every tab set on your site), but I just chose a div block right above that you have. Just make sure you are happy with the click target and scroll target and you can do this anywhere on your site.
thanks, this is conceptually what I’m looking to do, I just need to get it to work - forgive the noob q but are classes not case-sensitive? I tried implementing this but it did not quite work, so I’m wondering if it is a labeling issue.
I’ll keep trying
@jjh111 - when Webflow publishes it will make all of your classes lowercase with a hyphen replacing any space.
For example, “My Class” becomes “my-class” when published.
It looks like the scroll top animation is running, it’s just still targeting the body element rather than something else.
Ok thanks. Yes I switched it back to body because when I tried to target a div it did nothing. The div was ‘above’ the sticky nav bar and it still did not scroll ‘up’ to it. Feel like I’m missing something obvious!
@jjh111 - my fault try this instead:
$('html, body').animate({scrollTop:$('#div_id').position().top}, 'slow');
Replace #div_id with the id your div, a class should work too
It worked, thanks!!
I initially added the class to each tab container and it wasn’t working. Then I realized I should have added it to each ‘links’ in the tab menu instead. Also, as of 2023, the script that Sam wrote needs to be added to the ‘body’ section of the page settings where the tab is contained. Hope this helps!
We ran into a similar issue doing some work for a customer and figured out an easy solution that just requires some quick changes to one attribute and one script.
We’ve got a tutorial video below that walks you through the process and includes the code in the next tab over.
If you have any questions feel free to tag me!
Happy Wednesday!