Javascript 滚动生效（href至div）

我似乎找不到一个有效的简单方法。我想做的是非常基本的，当我点击导航栏中的链接时，它必须带我到所选的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:

$（文档）.ready（函数（）{
$（'a[href*=#]'）。每个（函数（）{
if（location.pathname.replace（/^\/，“”）=此.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；
如果（目标美元）{
var targetOffset=$target.offset（）.top；
$（此）。单击（函数（）{
$（“nav ul li a”）。删除类（“活动”）；
$（this.addClass（'active'）；
$（'html，body'）.animate（{scrollTop:targetOffset}，1000）；
返回false；
         });
      }
    }
  });
});

---

这似乎有效，但它不会让我到达所选部分的顶部。喜欢这一部分内容的中间部分是需要的。

使用这个jquery这里是小提琴

---

你可以使用这个功能，它很容易扩展到不同的点击事件

function transitionTo(elem){

    $('html, body').stop().animate({scrollTop: $(elem).offset().top

    }, 2000, function ()  {


    });
}

// and call it with:       

$('#link').on('click', function(e){
    e.preventDefault();

    transitionTo('#div');

   });

---

编辑了，忘了放进去了。一定是什么愚蠢的东西。标题改了，更准确。

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

function transitionTo(elem){

    $('html, body').stop().animate({scrollTop: $(elem).offset().top

    }, 2000, function ()  {


    });
}

// and call it with:       

$('#link').on('click', function(e){
    e.preventDefault();

    transitionTo('#div');

   });