X Theme scroll to top anchor code

Support
#1

Hey, in last thread i have been givien a code that scroll to nav bar in homepage instead of the upper slider above the nav bar.

however in other pages (where the top slider is not shown like in the homepage) it does not scroll to the top, but it scroll below the metahead.

how can i set the code so that in other pages it will scroll to the top so the banner below the meta head will be shown aswell?

the code is: `// Custom Scroll Top Anchor
// =============================================================================

if ( ! function_exists( ‘x_scroll_top_anchor’ ) ) :
function x_scroll_top_anchor() {

if ( x_get_option( 'x_footer_scroll_top_display' ) == '1' ) : ?>

  <a class="x-scroll-top custom-scroll-to-top <?php echo x_get_option( 'x_footer_scroll_top_position' ); ?> fade" title="<?php esc_attr_e( 'Back to Top', '__x__' ); ?>">
    <i class="x-icon-angle-up" data-x-icon="&#xf106;"></i>
  </a>

  <script>

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

    var windowObj            = $(window);
    var body                 = $('body');
    var bodyOffsetBottom     = windowObj.scrollBottom();             // 1
    var bodyHeightAdjustment = body.height() - bodyOffsetBottom;     // 2
    var bodyHeightAdjusted   = body.height() - bodyHeightAdjustment; // 3
    var scrollTopAnchor      = $('.x-scroll-top');

    function sizingUpdate(){
      var bodyOffsetTop = windowObj.scrollTop();
      if ( bodyOffsetTop > ( bodyHeightAdjusted * <?php echo x_get_option( 'x_footer_scroll_top_display_unit' ) / 100; ?> ) ) {
        scrollTopAnchor.addClass('in');
      } else {
        scrollTopAnchor.removeClass('in');
      }
    }

    windowObj.bind('scroll', sizingUpdate).resize(sizingUpdate);
    sizingUpdate();

    scrollTopAnchor.click(function(){
      var vtop = 0;
      if ( $('.x-slider-container').length > 0 ) {
        vtop = $('.x-slider-container').height();
      } 

      $('html, body').animate({ scrollTop: vtop }, 850, 'xEaseInOutExpo');
      return false;
    });

  });

  </script>

<?php endif;

}
add_action( ‘x_after_site_end’, ‘x_scroll_top_anchor’ );
endif;`

#2

Hi @angelofgod,

Thanks for posting in.

Looks like it’s different on my end, I checked and it scrolls below masthead where the slider is available. If you intend to scroll it to the top in all pages then you can simply remove that custom code.

Thanks!

1 Like
#3

Hey @Rad
what i ment is that in the frontend (homepage) i want it to stay as it is, but on other pages i want it to scroll above the masthead. is that possible?

#4

Hello There,

You can update the code and make sure that it will only work if there is a slider above the masthead. Perhaps the portion of the code can be updated into this:

if ( $('.x-slider-container.above').length > 0 ) {
   vtop = $('.x-slider-container.above').height();
}

When there is a slider above the masthead, it will scroll below the masthead and if the slider is assigned below the masthead, it will scroll above the masthead.

Hope this make sense.

1 Like
#5

Yes! Thanks! it is perfecly clear and make sense! thanks alot it worked!

#6

You’re welcome!
We’re glad we were able to help you out.

1 Like
#7

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