[Resolved] Sticky tabs with scroll to top of tab

[Dominik]

Hi there,

we do have an issue with woocommerce – I think it is not a problem related to GP, but maybe somebody still have an idea what the problem could be.

We have made woocommerce tabs sticky on mobile and then had the problem, that when the tabs are sticky and you scroll down one long tab and switch to another tab, the position of the view was somewhere on the bottom. So tried to code some javascript to scroll up to the top of the tab when switching tabs. That works – but with these lines of code some strange flicker is visible within the first second of page load and the page scrolls to the footer.

Here is the link: https://www.huppenkothen.net/kaufen-und-mieten/bagger/tb290-2
And a screenvideo of the issue: https://imgur.com/a/uFYVKOb

And this is the code to scroll up:

<script>

	    jQuery('ul.wc-tabs li a').click( function( event ) {
    		var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
        if ( parseInt( width ) <= 768 ) {
            jQuery('ul.wc-tabs li').removeClass('active');
            jQuery(this).parent('li').addClass('active');
            $("html, body").animate({scrollTop: $(".woocommerce-tabs").offset().top}, 1000);
            return;
        }
    } );
	
</script>

We would be happy if someone from the GP Community has a hint.

Thanks and best wishes
Dominik

[Leo]

Hi there,

This definitely doesn’t sound like an issue related to the theme.

I would recommend checking with the code author or a general WordPress forum like this:
https://wordpress.stackexchange.com/

[Dominik]

Hi Leo,

thanks – I will ask there.
In the WooCommerce forum nobody could help.

Best wishes,
Dominik

[Leo]

No problem 🙂

[Author]

Posts