title: Smooth scrolling to HTML bookmark
body: <p>I have the following markup</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Blah&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header id='navigation'&gt;
              &lt;nav&gt;
                  &lt;a rel='bookmark' href='#introduction'&gt;Home&lt;/a&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
          &lt;section id='content'&gt;
              &lt;section id='introduction'&gt;
                  &lt;header&gt;
                      &lt;h1&gt;Welcome&lt;/h1&gt;
                      &lt;a href='#navigation'&gt;Back to top&gt;&lt;/a&gt;
                  &lt;/header&gt;
              &lt;/section&gt;
          &lt;/section&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So you can click on <code>Home</code> and get to the <code>introduction</code> section with a bookmark.  You can then get back to the <code>navigation</code> by clicking <code>Back to top</code>.</p>
  
  <p>This will work in all browsers.</p>
  
  <p>What I want to do is add a javascript listener somehow so that if Javascript is enabled on the browser it listens for bookmarks and smooth scrolls to the bookmark.</p>
  
  <p>Thinking out loud, I could add an <code>onchange</code> listener to the location bar, parse the location and check for anything after a <code>#</code>.  I could get the element <code>id</code> of the text after this character and implement a smooth scrolling algorithm? I don't think this would negate the UA scrolling however.</p>
  
  <p>I could also parse the DOM for links that contain <code>#</code> links and add javascript onclick <code>smoothScoll(bookmark_name)</code> events and remove the bookmark so the link will just be <code>'#'</code> then in the <code>smoothScroll</code> do the scrolling and add it to the location bar after the #.</p>
  
  <p>I would like to learn to do this with javascript and not jQuery.</p>
  
  <p>Anyone got any ideas for doing this.  I want to leave the HTML as is and add javascript events in my <code>initPage()</code> which means that I <strong>know</strong> javascript is enabled.</p>
  
  <p>Thanks</p>
  
  <p>Matt</p>