javascript - ScrollTo效果(href至div)

我似乎找不到有效的简单scrollTo效果。我想要做的是非常基本的，这是当我单击导航栏中的链接时，它必须带我使用scrollTo效果进入选定的div ID。

这是我的代码。

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<section id="home">
  CONTENT
</section>

<section id="about">
  CONTENT
</section>

<section id="contact">
  CONTENT
</section>

JS：

<!----- Navegación Slide --->
$(document).ready(function() {
  $('a[href*=#]').each(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname
    && 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;

<!----- Funcion click + scroll al #div--->
         $(this).click(function() {
            $("nav ul li a").removeClass("active");
            $(this).addClass('active');
           $('html, body').animate({scrollTop: targetOffset}, 1000);
           return false;
         });
      }
    }
  });

});

这似乎可行，但是并没有带我到所选部分的顶部。它需要喜欢该部分内容的中间部分。

最佳答案

使用这个jQuery这里是小提琴http://jsfiddle.net/4qt9h95n/1/

$('a[href^="#"]').click(function() {
     $('html,body').animate({ scrollTop: $(this.hash).offset().top}, 1000);
     return false;
     e.preventDefault();
});