Scrolling Not Accounting for Sticky Header (buttons to scroll are not in header)

I have been working on my site for about 6 months. I have buttons to fast scroll but they appear to scroll too far due to the sticky header.

Theme- X Pro
Site- https://largeladders.com/
Example-

  • Go to page- https://largeladders.com/step-ladders/

  • Scroll down to the “Jump to Your Preferred Ladder Size” section

  • Click any of the three step stools (e.g., Step Stools, Small Step Ladders)

  • This happens site wide

Hi @jearredo,

Thanks for writing in. To achieve that, please try adding this custom JavaScript.

jQuery( function($){

    $(document).on('click', 'a[href^="#"].x-anchor-button',  function( e ) {

        e.stopPropagation();

        $('html, body').stop().animate( { scrollTop : $($(this).attr('href')).offset().top - $('.x-bar-is-sticky').height()  }, 'linear' );

    });

});

Hope it works.

Thanks! It works for non-mobile. When it goes to mobile, there is still a slight cutoff.

Hi @jearredo,

Try updating the JS to this.

jQuery( function($){

    $(document).on('click touchstart', 'a[href^="#"].x-anchor-button',  function( e ) {
		alert('test');
        e.stopPropagation();

        $('html, body').stop().animate( { scrollTop : $($(this).attr('href')).offset().top - $('.x-bar-is-sticky').height()  }, 'linear' );

    });

});

I added a touchstart event so that it will also take effect in mobile devices.

Hope it works.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.