Clicking tabs scrolls to top of page!

upd : I deprecated the wordpress version 5.1.8, now it works a little better, but clicking on Tabs always moves the page a little higher in the page a few inches but not at the top of the page.

• This reply was modified 4 years, 3 months ago by acwebdesigner.

Hi @acwebdesigner,

I have noticed this issue in a few places. WordPress 5.6 came with a new version of jQuery, which has caused problems with some themes.

Our plugin doesn’t add any additional CSS or JS when the page loads, we just add tabs to the built-in WooCommerce tabs. I’d recommend updating WooCommerce (and any related plugins or themes) to the newest versions. Make sure you have a backup in place before doing so.

If you’d like to supply a link to the problematic page, I can take a look.

Thanks,
Jon

Kindly assist down grading wordpress doesnt work…
https://www.allureadventure.com/

Hi @obedii21,

Sorry, I didn’t see your message at first. I’d recommend making a new thread in the future to make sure we see it quickly.

It looks like your theme has some code that controls the scroll to the element. I’m seeing this in your theme’s custom js file:

$('a[href*="\\#"]').click(function(event){
        var at_offset= $.attr(this, 'href');
        var id = at_offset.substring(1, at_offset.length);
        if ( ! document.getElementById( id ) ) {
            return;
        }
        if( $( at_offset ).offset() ){
            $('html, body').animate({
                scrollTop: $( at_offset ).offset().top-$('.at-navbar').height()
            }, 1000);
        }

    });

The problem with this sort of code and the hidden tabs is that the offset() of a hidden element is 0, which ends up scrolling you to the top of the page.

If this code was specific to the tabs, I’d recommend grabbing the parent element’s offset (as it will be visible). Since this code is applying to all anchor tags, that may not work very well.

If you want that scrolling animation to still work, you’ll want to update the $('a[href*="\\#"]') to ignore tabs, then create another click event for tabs specifically that uses $( at_offset ).parent().offset().

If you just want to fix the broken scroll, you could update the fail condition to exclude tabs, like this:

if ( ! document.getElementById( id ) || id.startsWith('tab') ) {
     return;
}

Let me know if that helps,
Jon