平滑滾動到HTML書籤

我有下面的標記平滑滾動到HTML書籤

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Blah</title> 
    </head> 
    <body> 
     <header id='navigation'> 
      <nav> 
       <a rel='bookmark' href='#introduction'>Home</a> 
      </nav> 
     </header> 
     <section id='content'> 
      <section id='introduction'> 
       <header> 
        <h1>Welcome</h1> 
        <a href='#navigation'>Back to top></a> 
       </header> 
      </section> 
     </section> 
    </body> 
</html>

所以，你可以點擊Home，並獲得了introduction部分用書籤。您可以點擊Back to top返回navigation。

這將適用於所有瀏覽器。

我想要做的就是以某種方式添加一個JavaScript偵聽器，以便在瀏覽器上啓用Javascript時，它會偵聽書籤並平滑滾動到書籤。

想一想，我可以在地址欄中添加一個onchange監聽器，解析位置並檢查#之後的任何內容。我可以得到這個字符後文本的元素id，並實現一個平滑的滾動算法？但我不認爲這會否定UA滾動。

我還可以解析爲包含#聯繫，並添加JavaScript的onclick smoothScoll(bookmark_name)事件和刪除書籤這樣的鏈接也只是'#'然後在smoothScroll做滾動和它＃後添加到地址欄鏈接的DOM 。

我想學習使用javascript而不是jQuery來做到這一點。

任何人都有這樣做的想法。我想離開HTML原樣並在我的initPage()中添加javascript事件，這意味着我知道 javascript已啓用。

感謝

馬特

來源

2011-03-31 Matt Clarkson

這很簡單，如果你使用jQuery。你必須有一個非jQuery的答案？ – 2011-03-31 11:41:19