HTML

Question

<div id="nav">
    <li><a href="#menu1">menu1</a></li>
    <li><a href="#menu2">menu2</a></li>
    <li><a href="#menu3">menu3</a></li>
</div>

<div id="contents">
    <h1 id=menu1></h1>
    <h1 id=menu2></h1>
    <h1 id=menu3></h3>
</div>

我制作了一个页面，其中包含三个内容并链接到他们的ID。使用jquery，如何在导航中点击菜单时自动滚动？

Answer 1

点击此处DEMO http://jsfiddle.net/mekwall/up4nu/

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>

Answer 2

您可以尝试这样的事情

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

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

Answer 3

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

http://jsfiddle.net/UUxq6/

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

如何在页面中自动滑动

3 个答案:

HTML