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/

<强>加成：这是一个错误，你能发现它吗？

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

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

Jquery为什么我的div会逐渐消失？

3 个答案: