Javascript JQuery的淡出问题（）

我创建了一个脚本，用于在

$（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();
 }

仅滚动时按钮工作正常，但如果在滚动到页面顶部时调整窗口/打开检查元素的大小，则按钮会淡出然后快速淡入，您知道如何解决此问题吗？

在滚动过程中，

.scroll（）

事件会多次发生。因此，您不断地排队等待一大堆淡出事件。也许最好的办法是使用计时器来知道滚动何时实际停止，并且在滚动实际停止时只触发淡入淡出一次

但是，您至少可以通过添加

.stop（true）

来避免淡入淡出事件的备份：

---

在这篇文章中，你可以看到一个插件方法，它在触发你的事件之前一直等到滚动停止：

在我看来，有一个更好的方法来实现你想要做的事情

使用CSS转换，而不是使用JavaScript进行淡入淡出动画。然后使用JavaScript根据滚动位置向每个按钮添加/删除类

CSS:

JavaScript:

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

---

我发现CSS转换动画比jQuery动画快得多，而且在停止/启动/恢复动画时，它们更加健壮。

这可能是因为浏览器触发了滚动事件，因为文档的高度因调整大小和检查器高亮显示内容而改变。在某些情况下，您需要禁用滚动处理程序。我查看了一个示例（此处：），它以完全相同的方式执行此操作，但如果我调整窗口大小，按钮不会像meSorry那样淡入，我错过了

stop（）

，实际上我错过了

$（'.scroll back'）。stop（）.fadeOut（）

，但不在

fadeIn（）

上，因为它可能看起来很难看。@user3624205-您需要将第一个参数设置为

。stop（true）

设置为

true

，以清除动画队列。您最好在我引用的帖子中使用

.scrolled（）

jQuery方法。这样你就不会在滚动过程中改变淡入度数百次。正如我所说，问题不在于滚动，而在于resizing@user3624205-除非在调整大小事件上有其他代码，否则这可能是因为在调整大小时得到了滚动事件，对吗？所以，阻止多个滚动事件也会清除这些问题。我在调整大小时不会得到滚动事件。我刚查过。

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

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