Scroll to top slow

[arnoldmeulenbeld]

Hi,

I have a custom post type single page template with a scroll to top button. It works, but I want it to scroll slow. Right now I have this in custom Js:
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
What’s the right code to make it scroll slow? TIA

[ruenel]

Hello Arnold,

Thanks for writing in!

The scroll to top button has it’s own script and in it is the delay for the scroll. If you want to modify it, since what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// 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 <?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-s="&#xf106;"></i>
      </a>

      <script>

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

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

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

        $window.on('scroll', sizingUpdate).resize(sizingUpdate);
        sizingUpdate();

        $scrollTopAnchor.on( 'click', function(){
          
          return false;$('html, body').animate({ scrollTop: 0 }, 850, 'xEaseInOutExpo');
        });

      });

      </script>

    <?php endif;

  }
  add_action( 'x_after_site_end', 'x_scroll_top_anchor' );
endif;


// =============================================================================

You may reduce or increase the 850 delay in this line from the code above:

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

We would love to know if this has worked for you. Thank you.

[arnoldmeulenbeld]

Thanks for the quick response. This wasn’t exactly what I meant . Though that’s mostly my fault for not explaining well enough. The fact is I’m using an LMS and ond the lesson pages the native scroll to top button doesn’t appear. That’s why I built one especially for those pages and although it works, it lacks a bit of smooth scrolling. I investigated further and decided that it’s not worth the effort since it is working. Thanks again for your response.

[matt]

Gotcha. No worries, Arnold. Here if you need us.