scrollToTop不能处理jQuery（document）.on（'ready'，function（）{

Question

I'm trying to load my scrolltoTop() function on dom ready, but the event is not firing. Can you please someone help me?

My code is here:

<button class="scroll-top">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</button>

:

"use strict";
function scrollToTop () {
  if ($('.scroll-top').length) {
    $(window).on('scroll', function (){
      if ($(this).scrollTop() > 200) {
        $('.scroll-top').fadeIn();
      }
      else {
        $('.scroll-top').fadeOut();
      }
    });
    $('.scroll-top').on('click', function() {
      $('html, body').animate({scrollTop : 0},1500);
      return false;
    });
  }
}

Here is my DOM ready function:

jQuery(document).on('ready', function() {
  (function ($) {
    scrollToTop ();
  })(jQuery);
});

Using Jquery version: jquery-3.4.1.min.js

Answer 1

See this demo. when you run script it will scroll to top

 jQuery(document).on('ready', function() { $(window).scrollTop(0); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="border:1px solid black;width:100px;height:150px;overflow:auto"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div><br> 

Answer 2

From jquery documentation , from version 3.0

$( document ).ready(function() {
  // Handler for .ready() called.
});

was replaced with

$(function() {
   // Handler for .ready() called.
});

Maybe try:

$(function() {
   window.scrollTo(0,0);
});

Answer 3

use $(document).ready(function() {}

 "use strict"; function scrollToTop() { console.log('Calling'); if ($('.scroll-top').length) { $(window).on('scroll', function() { console.log($(this).scrollTop()); if ($(this).scrollTop() > 200) { $('.scroll-top').fadeIn(); } else { $('.scroll-top').fadeOut(); } }); $('.scroll-top').on('click', function() { $('html, body').animate({ scrollTop: 0 }, 1500); return false; }); } } $(document).ready(function() { scrollToTop(); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="scroll-top"> <i class="fa fa-angle-up" aria-hidden="true"></i> </button> 

Answer 4

You need to pass the height you want to scroll to!

For example if you want to go to the start you need to pass 0.

$("div").scrollTop(0);