动画锚点滚动 - 返回顶部按钮多次褪色

我仍然在学习jquery并尝试制作动画锚点滚动条。我的代码似乎可以工作，但是，当动画完成时，它会在“返回顶部”按钮上添加额外的淡入/淡出。有人能让我知道我做错了什么吗？动画锚点滚动 - 返回顶部按钮多次褪色

$(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/

来源

2013-06-12 user1227678

更改您的点击功能这样的：

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

});

发生的事情是，当你点击返回页首，你去顶，然后再激活淡出状态。然后你回到原来的位置并启动淡入淡出状态。最后你回到顶端，再次激活淡出条件。

所有这些褪色都在排队，你会看到所有这些发生。加入e.preventDefault()。将取代正在回到顶端的默认行为。

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

来源

2013-06-12 22:44:53

谢谢你的帮忙！ – user1227678

如果它不是一个＃锚比e.preventDefault不需要？有没有更好的方法来编码我所拥有的并获得相同的结果？还在学习jQuery。 – user1227678

防止默认总是更好，因为没有＃，你失去了“a”（主要是光标）的功能。是的，你可以删除'＃'并使用css来改变光标，但是'a'必须有一个像'img'这样的href必须有一个src。另外，如果JS被禁用，如果href是'＃'，则返回顶部仍然可以工作。 –

动画锚点滚动 - 返回顶部按钮多次褪色

回答

相关问题