Question

我还在学习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/

Answer 1

将您的点击功能更改为：

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

});

当您点击返回顶部时，首先进入顶部，然后激活淡出条件。然后你回到原来的位置并激活淡入淡出状态。最后你回到顶部，再次激活淡出状态。

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

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

动画主播滚动 - “返回首页”按钮不止一次淡出

1 个答案: