Title: Local Scroll Link Issue
Last modified: September 7, 2021

---

# Local Scroll Link Issue

 *  Resolved [Michael](https://wordpress.org/support/users/whispardesign/)
 * (@whispardesign)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/)
 * Hello,
 * I saw a previous post where this was answered but it is a few years old. [https://wordpress.org/support/topic/how-to-link-to-specific-tab/](https://wordpress.org/support/topic/how-to-link-to-specific-tab/)
 * I think it needs a bit of tweaking – is scrolls below the tab title.
 * Thoughts?
    Best, Michael
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Flocal-scroll-link-issue%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [jpowersdev](https://wordpress.org/support/users/jpowersdev/)
 * (@jpowersdev)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14850903)
 * Hi [@whispardesign](https://wordpress.org/support/users/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
 *  Thread Starter [Michael](https://wordpress.org/support/users/whispardesign/)
 * (@whispardesign)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14851448)
 * Thanks Jon
 * Here is the script:
 *     ```
       jQuery( document ).ready( function() {
   
         jQuery( 'body' ).on( 'click', '.woocommerce-product-details__short-description a[href^="#tab-"]', function() {
             var href_pieces = jQuery( this ).attr( 'href' ).split( '#tab-' );
             var href        = '#tab-title-' + href_pieces[1];
             jQuery( href ).children( 'a' ).click();
         });
       });
       ```
   
 *  [jpowersdev](https://wordpress.org/support/users/jpowersdev/)
 * (@jpowersdev)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14855283)
 * Hi [@whispardesign](https://wordpress.org/support/users/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
 *  Thread Starter [Michael](https://wordpress.org/support/users/whispardesign/)
 * (@whispardesign)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14855844)
 * Hi Jon,
 * Thanks for this. I thought it might have something to do with the sticky header.
   
   I added the code but it’s not working now. Not seeing what caused that all. Thoughts?
 *  [jpowersdev](https://wordpress.org/support/users/jpowersdev/)
 * (@jpowersdev)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14856158)
 * Hi [@whispardesign](https://wordpress.org/support/users/whispardesign/),
 * I only modified the internal function, make sure it’s still wrapped in the “page
   loaded” check:
 *     ```
       jQuery( document ).ready( function() {
           ..
       }
       ```
   
 * Thanks,
    Jon
 *  Thread Starter [Michael](https://wordpress.org/support/users/whispardesign/)
 * (@whispardesign)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14856239)
 * Yep my bad – I missed that.
    All good now Jon – thanks for the assist – I need
   more coffee I think :/
 *  [jpowersdev](https://wordpress.org/support/users/jpowersdev/)
 * (@jpowersdev)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14856542)
 * Hey [@whispardesign](https://wordpress.org/support/users/whispardesign/),
 * Glad it’s working now! Let us know if you need anything else.
 * Thanks,
    Jon
 *  Thread Starter [Michael](https://wordpress.org/support/users/whispardesign/)
 * (@whispardesign)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14860282)
 * Thanks Jon – will do… marking as complete
 *  Thread Starter [Michael](https://wordpress.org/support/users/whispardesign/)
 * (@whispardesign)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14860284)
 * Or may be you can… or already did 🙂
 *  Thread Starter [Michael](https://wordpress.org/support/users/whispardesign/)
 * (@whispardesign)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14883851)
 * Sorry to bring this back up again – but I had to enable page-builder compatibility
   mode and it seems to have broken this script… any thoughts?
    [https://staging7.wetshavingclub.com/product/safety-razor-starter-kit-composite2/#pick-your-razor](https://staging7.wetshavingclub.com/product/safety-razor-starter-kit-composite2/#pick-your-razor)
 * The original page still works fine (but it is not built with Elementor :/ )
 * Best,
    Michael
 *  [jpowersdev](https://wordpress.org/support/users/jpowersdev/)
 * (@jpowersdev)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14890514)
 * Hi [@whispardesign](https://wordpress.org/support/users/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

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Local Scroll Link Issue’ is closed to new replies.

 * ![](https://ps.w.org/yikes-inc-easy-custom-woocommerce-product-tabs/assets/icon-
   256x256.png?rev=1558461)
 * [Custom Product Tabs for WooCommerce](https://wordpress.org/plugins/yikes-inc-easy-custom-woocommerce-product-tabs/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/yikes-inc-easy-custom-woocommerce-product-tabs/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/)
 * [Active Topics](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/reviews/)

 * 11 replies
 * 2 participants
 * Last reply from: [jpowersdev](https://wordpress.org/support/users/jpowersdev/)
 * Last activity: [4 years, 8 months ago](https://wordpress.org/support/topic/local-scroll-link-issue/#post-14890514)
 * Status: resolved