動畫錨點滾動 - 返回頂部按鈕多次褪色

我仍然在學習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是'＃'，則返回頂部仍然可以工作。 –

動畫錨點滾動 - 返回頂部按鈕多次褪色

回答

相關問題