title: Smooth scroll to ID using jQuery
body: <p>Struggling to implement a smooth scroll feature when navigating to an ID using my navbar.  Instead, it makes the default jump, which is a bit of an eye sore.</p>
  
  <p>I am very inexperienced using jQuery, so any pointers in the right direction would be much appreciated. </p>
  
  <p>I have made an attempt to get this implemented however, as I have said, it is 'jumping' as opposed to scrolling.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;li&gt;
    &lt;a href="#popular"&gt;Most Popular&lt;/a&gt;
  &lt;/li&gt;
  &lt;div class="col-sm-12" id="popular"&gt;
  &lt;h3&gt;&lt;i aria-hidden="true" class="fa fa-fire"&gt;&lt;/i&gt; Most Popular&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery </p>
  
  <pre><code>$(document).ready(function() {
    $("#popular").on('click', function(event) {
      if (this.hash !== "") {
        event.preventDefault();
        var hash = this.hash;
        $('col-sm-12').animate({
          scrollTop: $(hash).offset().top
        }, 800, function() {
          window.location.hash = hash;
        });
      }
  </code></pre>