0

我还在学习 jquery 并尝试制作动画锚滚动。我的代码似乎可以工作，但是，当动画完成时，它会在 Back To Top 按钮上添加一个额外的 fadeIn/fadeOut。有人可以让我知道我做错了什么吗？

$(document).ready(function(){
    $('a.anchor').click(function(){
       var anchorAttr = $(this).attr('data-title');
       var anchorPos = $('#' + anchorAttr).offset().top;

       $('html,body').stop().animate({scrollTop: anchorPos});
    });

   var backtoTop = $('a.backtotop');
     backtoTop.hide();

   $(window).scroll(function () {
            if ($(this).scrollTop() < 100) {
                backtoTop.fadeOut();
            } else {
                backtoTop.fadeIn();
            }
        });

    backtoTop.click(function () {
        $('body,html').stop().animate({
                scrollTop: 0
            });

    });

http://jsfiddle.net/vinh/RmyxK/

4

1 回答 1

0

将您的点击功能更改为：

backtoTop.click(function (e) {
    e.preventDefault();
    $('body,html').stop().animate({
            scrollTop: 0
        }, 800);

});

发生的情况是，当您单击返回顶部时，您首先进入顶部，然后激活淡出条件。然后你回到原来的位置并激活淡入条件。最后你回到顶部，再次激活淡出条件。

所有这些褪色都在排队，你会看到所有这些都发生了。添加e.preventDefault(). 将取消返回顶部的默认行为。

小提琴：http: //jsfiddle.net/RmyxK/5/

于 2013-06-12T22:44:53.703 回答