jQuery与fadeOut（）的问题

Question

我创建了一个脚本，当$(document).scrollTop() > 100 ，淡入滚动到顶部按钮，如果不正确，则淡入淡出。 这是通过以下方式完成的：

 $.fn.scrollToTop = function() {
     $(window).scroll(function() {
            if( $(this).scrollTop() > 100) {
                $('.scroll-back').fadeIn();
            } else {
                $('.scroll-back').fadeOut();
            }
     });
 }

并使用它，我这样做：

 $(document).ready(function() {
   $(document).scrollToTop();
 }

仅在滚动时该按钮可以正常工作，但是如果在滚动到页面顶部时调整窗口大小/打开检查元素，则该按钮会逐渐消失，然后又迅速返回，有什么主意该如何解决？

Answer 1

.scroll()事件在滚动过程中发生了很多次。 因此，您一直在排队处理一系列淡入淡出事件。 可能最好的方法是使用计时器来知道滚动实际停止的时间，并且仅在滚动实际停止时才触发一次淡入。

但是，您至少可以通过添加.stop(true)避免淡入淡出事件的备份：

$.fn.scrollToTop = function() {
     $(window).scroll(function() {
            if( $(this).scrollTop() > 100) {
                $('.scroll-back').stop(true).fadeIn();
            } else {
                $('.scroll-back').stop(true).fadeOut();
            }
     });
 }

您可以在此文章中看到一个插件方法，该方法要等到滚动停止后才触发您的事件： 在jquery中处理$（window）.scroll函数的更有效方法？

Answer 2

我认为，有一种更好的方法可以实现您想要的目标。

与其使用JavaScript进行淡入淡出的动画，不如使用CSS过渡。 然后使用JavaScript根据滚动位置向每个按钮添加/删除类。

CSS：

.scroll-back {
    /* Existing style... */
    opacity: 1.0;
    transition: opacity ease-in-out 400ms;
}
.scroll-back.hide {
    opacity: 0;
}

JavaScript：

$(window).scroll(function() {
    if( $(this).scrollTop() > 100) {
        $('.scroll-back').removeClass('hide');
    } else {
        $('.scroll-back').addClass('hide');
    }
});

我发现CSS过渡动画比jQuery的动画快得多 ，而且他们更强大，当谈到停止/启动/恢复动画。