2

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

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

代码结构：

 <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 将它们慢慢拖到该部分并且对于联系人也是如此？

4

2 回答 2

2

只需在您的部分名称中添加id's ：div

<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;
})

小提琴：http: //jsfiddle.net/Hw4L6/

于 2013-08-24T19:54:23.710 回答
-1

您可以使用 jquery scrollTo.js脚本进行平滑滚动

或者

您可以通过在href标记中提供部分的 id 来链接到要滚动的部分，例如 >>

<a href="#section2" class="link">About</a>

我2年前写的一个小网站也用过scrollTo.js ，这里是链接->

http://students.iitmandi.ac.in/~boga_saikiran/

在那里，当您单击右上角的“联系我”按钮或右下角的顶部按钮时，您可以看到平滑的滚动效果。

与之相关的代码是>>

（假设您的 head 标签中包含 jquery js 文件）

1）下载scrollTo.js文件并将其放在您的html文件所在的目录中

2）在head标签中包含这个

    <script type='text/javascript' src='scrollTo.js'></script>

3）将这些放在头标签内的javascript脚本标签中

   $(document).ready(function()
    {
      $('#link_id').click(function(e)
         {
           $.scrollTo('#about','slow');
           e.preventDefault();
         });
    });
于 2013-08-24T20:03:12.367 回答