Jquery 如何自动滑入页面

我做了一个页面，包括三个内容和链接到他们的id。 使用jquery，如何在导航中单击菜单时自动平滑滚动？

请查看演示

HTML

福
酒吧
巴兹

你可以试试这样的东西

<ul id="top-menu">
  <li class="active">
    <a href="#">Top</a>
  </li>
  <li>
    <a href="#foo">Foo</a>
  </li>
  <li>
    <a href="#bar">Bar</a>
  </li>
  <li>
    <a href="#baz">Baz</a>
  </li>
</ul>

<a id="foo">Foo</a>
<a id="bar">Bar</a>
<a id="baz">Baz</a>

---

好的，你可以这样做，更经典的方式：

---

我确信你已经尝试过一些事情，不是吗？对于这种复杂的任务，没有被回答过几千次，你应该考虑雇用一个完整的开发团队。或者你自己试试…@是的，你是对的，我感到羞愧。谢谢你的建议！

<ul id="top-menu">
  <li class="active">
    <a href="#">Top</a>
  </li>
  <li>
    <a href="#foo">Foo</a>
  </li>
  <li>
    <a href="#bar">Bar</a>
  </li>
  <li>
    <a href="#baz">Baz</a>
  </li>
</ul>

<a id="foo">Foo</a>
<a id="bar">Bar</a>
<a id="baz">Baz</a>

$('.menu').click(function(){     

     $('html, body').animate({scrollTop: $("#cmenu1").offset().top}, 2000);
});

$('#nav a').on('click',function(e){
    e.preventDefault();
    $('html, body').animate({
         scrollTop: $(this.href.split('/').pop()).offset().top
     }, 2000);
});