title: Jquery Smooth Scroll Using Offset.top
body: <p>I'm attempting to create a smooth scrolling effect from a <code>topNav</code> to various sections on a webpage. In the code below, I've recreated the issue I'm having, which is simply I can't seem to have the scroll process animated.  My links jump to the proper sections, and I've <code>console.logged</code> along the way to make sure the proper elements are being grabbed at the time of the <code>'click'</code> but it is still not working.</p>
  
  <p>Can anyone assist? Initially I thought it might have to do with the fact that instead of giving the <code>navlinks</code> individual IDs, I grouped them with a class name.  Could that be part of my problem?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
   
   $('.slide').click(function() {
    
    var link = $(this).attr('href');
    
    $('html,body').animate({
     scrollTop: $(link).offset().top}, 1000);
    return false;
    
    
    
    
   });
   
   
   
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   padding: 0;
   margin: 0;
  }
  
  nav {
   width: 100%;
   height: 120px;
  }
  
  div {
   width: 100%;
   height: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
   &lt;a href="#first" class="slide"&gt;Section 1&lt;/a&gt;
   &lt;a href="#second" class="slide"&gt;Section 2&lt;/a&gt;
   &lt;a href="#third" class="slide"&gt;Section 3&lt;/a&gt;
   &lt;a href="#fourth" class="slide"&gt;Section 4&lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;div&gt;
   &lt;a name="first"&gt;Section 1&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
   &lt;a name="second"&gt;Section 2&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
   &lt;a name="third"&gt;Section 3&lt;/a&gt; 
  &lt;/div&gt;
  
  &lt;div&gt;
   &lt;a name="fourth"&gt;Section 4&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>