title: jQuery smooth scrolling anchor navigation
body: <p>I have a list based navigation at the top of my site, it's a one page site so the a hrefs are anchors to sections on the page. I've used this code: <a href="https://stackoverflow.com/questions/26969019/jquery-smooth-scroll-positioning-doesnt-work">jQuery smooth scroll positioning doesn&#39;t work</a></p>
  
  <p>Navigation:</p>
  
  <pre><code>&lt;nav&gt;
     &lt;ul class="navigation"&gt;
        &lt;li class="navigation"&gt;&lt;a class="scroll" href="#about-me"&gt;about me&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navigation"&gt;&lt;a class="scroll" href="#my-skills" &gt;my skills&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navigation"&gt;&lt;a class="scroll" href="#portfolio"&gt;portfolio&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navigation"&gt;&lt;a class="scroll" href="#contact"&gt;contact&lt;/a&gt;
        &lt;/li&gt;    
     &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Section/div:</p>
  
  <pre><code>&lt;section id="contact"&gt; &lt;!----&gt;
      &lt;div class="panel" id="contact"&gt;
          &lt;h2&gt;Contact&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/section&gt; &lt;!----&gt;
  </code></pre>
  
  <p>Javascript used:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $('a[href^="#"]').on('click',function (e) {
          e.preventDefault();
  
          var target = this.hash;
          $target = $(target);
  
          $('html, body').stop().animate({
              'scrollTop':  parseInt($target.offset().top,10);
          }, 900, 'swing', function () {
              window.location.hash = target;
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The anchor works and it jumps to the section, but with no scrolling?</p>