Jquery为什么我的div会一次又一次地消失？

Question

所以我有一个简单的按钮，它悬浮在屏幕的底部，当点击它时，它会滚动回页面的顶部。问题是，当单击按钮开始淡出，然后返回，然后退出，一旦它到达顶部。

这是我的代码：

<div class="backToTop">
<a href="#top">Top</a>
</div>

Javascript：

$(window).scroll(function () {            
        if ($(window).scrollTop() > $(this).height() + 100) {
            $('.backToTop').fadeIn();
        } else {
            $('.backToTop').fadeOut();
        }
});

$('.backToTop a').click(function () {
        var anchor = $(this).attr('href');
        var sub = anchor.substring(anchor.search('#'));
        $('html, body').animate({ scrollTop: 0 }, 800);
});

Answer 1

最简单的解决方案:不要使用链接。

因为您使用的是javascript，所以根本不需要a href，所以可以使用span，这样单击就不会触发其他滚动事件。

<div class="backToTop">
    <span>Top</span>
</div>

演示： http://jsfiddle.net/UmYgG/

奖金：这是一个bug，你能发现它吗？

   $(window).scroll(function () {            
            if ($(window).scrollTop() > $(this).height() + 100) {
                $('.backToTop').fadeIn();
            } else {
                $('.backToTop').fadeOut();
            }
    });

$(this)发送到窗口，而不是元素。应该是$('.backToTop')。你永远不会达到比窗口高更大的scrollTop。

Answer 2

这是因为当您单击链接回到页面顶部时，它也会触发滚动事件。一种解决方案是单击链接时设置一个标志，如下所示：

var showBackToTop = true;
$(window).scroll(function () {
    if ($(window).scrollTop() > $(this).height() + 100 && showBackToTop) {
        $('.backToTop').fadeIn();
    } else {
        $('.backToTop').fadeOut();
    }
});

$('.backToTop a').click(function () {
    showBackToTop = false;
    var anchor = $(this).attr('href');
    var sub = anchor.substring(anchor.search('#'));
    $('html, body').animate({ scrollTop: 0 }, 800, 'swing', function(){showBackToTop = true;});
});

Answer 3

简单的答案是，jQuery实际上使用了一个动画队列，这包括fadeIn/fadeOut。

因为在滚动窗口时会触发许多滚动事件，所以它实际上会排队等待那些fadeIn/fadeOut动画。

为了防止它这样做，您可能需要使用.stop() jQuery函数。这将停止以前的动画，阻止它完成，并启动链中的下一个函数。

示例：

...
    $('.backToTop').stop().fadeIn();
} else {
    $('.backToTop').stop().fadeOut();
}
...

如果由于某种原因无法工作，则可以做的另一件事是设置一个计时器，该定时器运行滚动方法中的代码，并在每次滚动时被清除。但是，当链接显示或隐藏时，它会造成轻微的延迟，这可能并不理想。