javascript - 我如何结合使用 JQuery 和 anchor 标记将屏幕移动到某个位置？

Question

我以前从未使用过这个，所以如果我使用了太多的词来定义我正在寻找的东西，我不确定我是否道歉。

我想在页眉中创建一个导航菜单，点击链接后屏幕应缓慢向下移动到页面的该部分。

代码结构:

 <div class="header">
      <a href="#about" class="link">About</a>
      <a href="#contact" class="link">Contact</a>
  </div>
  <div class="container">
       Some content
  </div>
  <div class="section2">
      About
  </div>
  <div class="section3">
      Contact
   </div>

因此，如果用户单击“关于我如何使用 JQuery”将他们慢慢拖到该部分并进行联系？

Answer 1

只需在您的 div 上添加 id 的部分名称:

<div id='about' class="section2">
     About
</div>

然后使用这段代码:

$('.link').click(function(){
    $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}) //Will maybe be $(window) instead of html,body.
    return false;
})

fiddle :http://jsfiddle.net/Hw4L6/