2

So I have a simple button that hovers at the bottom of the screen that when click it scrolls back to the top of the page. The problem is when click the button begins to fade out, then back in, and then back out once it gets to the top.

Here is my code:

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

3 回答 3

3

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

因为你使用 javascript 你根本不需要a href，你可以使用 aspan代替，这样点击不会触发其他滚动事件。

<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比窗口高度更大的高度。

于 2013-08-06T22:42:19.357 回答
1

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

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;});
});
于 2013-08-06T22:41:15.037 回答
0

简单的答案是 jQuery 实际上使用了动画队列，这包括淡入/淡出。

因为在滚动窗口时会触发很多滚动事件，它实际上会将那些淡入/淡出动画排队。

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

例子：

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

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

于 2013-08-06T22:57:31.633 回答