平滑滚动到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