title: ScrollTo Effect (href to div)
body: <p>I can't seem to find a working simple scrollTo effect. What I want to do is very basic, it's when I click on a link in my nav bar, it must take me to the selected div id with a scrollTo effect.</p>
  
  <p>This is the code I have.</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;section id="home"&gt;
    CONTENT
  &lt;/section&gt;
  
  &lt;section id="about"&gt;
    CONTENT
  &lt;/section&gt;
  
  &lt;section id="contact"&gt;
    CONTENT
  &lt;/section&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>&lt;!----- Navegación Slide ---&gt;   
  $(document).ready(function() {
    $('a[href*=#]').each(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
      &amp;&amp; location.hostname == this.hostname
      &amp;&amp; this.hash.replace(/#/,'') ) {
        var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
        var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
         if ($target) {
           var targetOffset = $target.offset().top;
  
  &lt;!----- Funcion click + scroll al #div---&gt;   
           $(this).click(function() {
              $("nav ul li a").removeClass("active");
              $(this).addClass('active');
             $('html, body').animate({scrollTop: targetOffset}, 1000);
             return false;
           });
        }
      }
    });
  
  });
  </code></pre>
  
  <p>This seems to work, but it doesnt take me to the top of the selected section. It takes to like the middle of the section's content.</p>