title: Scrolling Page with jQuery not working
body: <p>New to javascript, trying to create a simple program that scrolls to the div when navigation item is clicked. However, its not working, I can't figure out why.</p>
  
  <p>Here is the snippet :</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() {
        alert("asda");
      
        setBindings();
      });
      
      function setBindings() {
        $("nav a").click(function(e) {
           // stops the a tags for working.. i.e. clicking to another page. Functions stops the functionality.
          var sectionID = e.currentTarget.id + "Section";
          alert('button id ' + sectionID);
      
          $("html body").animate({
            scrollTop: $("#" + sectionID).offset().top
          }, 1000)
          })
      
        })
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="clearfix"&gt;
     &lt;div class="logo-container"&gt;
      &lt;i&gt;&lt;h2&gt;&lt;b&gt;DELIVERY MOTION&lt;/b&gt;&lt;/h2&gt;&lt;/i&gt;
  
     &lt;/div&gt;
  
     &lt;ul class="clearfix"&gt;
      &lt;li&gt;&lt;a id="delivery" href="#"&gt;Delivery&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a  id="about" href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
  
     &lt;/ul&gt;
  
  
  
     &lt;a href="#" id="pull"&gt;Menu&lt;/a&gt;
    &lt;/nav&gt;
  
  
      &lt;div id="deliverySection"&gt;
    &lt;h1&gt; Order anything from anywhere in Karachi instantly at your doorstep. &lt;/h1&gt;&lt;hr&gt;
    &lt;div id='fee-estimate-box'&gt;
     &lt;form id='fee-estimate-form' action="#"&gt;
       &lt;legend id='delivery-text'&gt;Delivery Fee Calculator&lt;/legend&gt;
       &lt;span&gt;FROM &lt;/span&gt; &lt;input type="text" name="firstname" value="PICKUP ADDRESS"&gt;
       &lt;span&gt;TO &lt;/span&gt; &lt;input type="text" name="lastname" value="DROP ADDRESS"&gt;
       &lt;span&gt;ESTIMATED FEE &lt;/span&gt; &lt;input type="text" name="estimated-fee" value="0.00 PKR"&gt;
       &lt;input class='btn-submit' type="submit" value="BOOK NOW!"&gt;
     &lt;/form&gt;
  
    &lt;/div&gt;
    &lt;div id='silver-bar'&gt;
     &lt;img src='img/red-car.png' alt='fast deliver'&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div id="aboutSection"&gt;
    &lt;h2&gt; How it works &lt;/h2&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-2" id="infobox"&gt;
       &lt;img src='img/map-icon.png' width="50px" height="50px"&gt;
       &lt;h3&gt; Search &lt;/h3&gt;
       &lt;h4&gt;Select pickup address &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-2"&gt;
       &lt;br&gt;&lt;br&gt;
       &lt;img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-2"  id="infobox"&gt;
       &lt;img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img"&gt;
       &lt;h3&gt; Order&lt;/h3&gt;
       &lt;h4&gt;Make a booking online &lt;/h4&gt;
        &lt;/div&gt;
      &lt;div class="col-sm-2"&gt;
       &lt;br&gt;
       &lt;img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'&gt;
        &lt;/div&gt;
      &lt;div class="col-sm-2"  id="infobox"&gt;
       &lt;img src='img/truck-icon.png' width="50px" height="50px"&gt;
       &lt;h3&gt; Delivered&lt;/h3&gt;
       &lt;h4&gt;Instant courier delivery&lt;/h4&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>At first I thought the problem was with my jquery, however its working fine. The links to javascript is correct too. I've tried rechecking the animate function but I can't pin point the issue. Any ideas?</p>