javascript - scrollToTop 不适用于 jQuery(document).on ('ready' , function() {

Question

我正在尝试在 dom 上加载我的 scrolltoTop() 函数，但事件没有触发。你能请别人帮助我吗？

我的代码在这里:

<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;
    });
  }
}

这是我的 DOM 就绪函数:

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

使用Jquery版本:jquery-3.4.1.min.js

Answer 1

使用 $(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>