Local Scroll Link Issue

Hi @whispardesign,

In your case, you probably want to modify the javascript to scroll to something directly above the tab (like the container wrapping the tabs). Could you post your javascript here? It’s been minified on your site, so I’m struggling to find it.

Thanks,
Jon

Hi @whispardesign,

So the real problem here is not with the scrolling, but rather the fact that your navbar is fixed. It’s correctly scrolling to the tab, but the tab is hidden behind your navbar.

You can use something like this to control where it scrolls:

jQuery( 'body' ).on( 'click', '.woocommerce-product-details__short-description a[href^="#tab-"]', function(e) {
    e.preventDefault();

    var href_pieces = jQuery( this ).attr( 'href' ).split( '#tab-' );
    var href        = '#tab-title-' + href_pieces[1];
    const tab = jQuery( href ).children( 'a' )

    tab.click();

    jQuery('html, body').animate({
	    scrollTop: tab.parent().offset().top - 200 // Change the 200 as needed
    }, 1500);	
  });

By manually animating the page you can choose to move 200 fewer pixels down (as I have in this example), or any other amount.

Let me know if that helps,
Jon

Hi @whispardesign,

I only modified the internal function, make sure it’s still wrapped in the “page loaded” check:

jQuery( document ).ready( function() {
    ..
}

Thanks,
Jon

Hey @whispardesign,

Glad it’s working now! Let us know if you need anything else.

Thanks,
Jon

Hi @whispardesign,

The anchor tag has an href of #tab-razor-guide, but it looks like that tab is now named razor-choices, so the javascript isn’t finding the associated tab.

If you change #tab-razor-guide to #tab-razor-choices it should work.

Jon