如何將過渡效果添加到頁面頂部的鏈接？ HTML和CSS

Question

我的頁面底部有一個箭頭鏈接到頁面的頂部，我希望它慢慢向上移動。我認爲這將通過轉換或改造加入。

Answer 1

平滑滾動是你正在尋找的，但它不能用HTML或CSS來完成。這裏有一個jQuery腳本來完成它：

$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

現在只是讓你的箭頭的東西，如「#top返回」爲href值的錨鏈接，並在頁面的頂部添加ID =「頂」的元素。

腳本中的「1000」在滾動動畫期間爲毫秒（在本例中爲1秒）。如果您需要更長時間的滾動，請調整此項。