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

只需在id上添加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/

Answer 2

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

或

您只需在 href 标记中提供该部分的ID即可链接到您要滚动的部分，例如＆gt;＆gt;

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

我在2年前写过的一个小网站上也使用了 scrollTo.js ，这里是链接 - ＆gt;

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

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

与之相关的代码是＆gt;＆gt;

（假设你的头标签中包含了jquery js文件）

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

2）将其包含在头标记

中

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

3）将这些标记放在 head 标记内的javascript 脚本标记中

   $(document).ready(function()
    {
      $('#link_id').click(function(e)
         {
           $.scrollTo('#about','slow');
           e.preventDefault();
         });
    });

如何使用JQuery与锚标签协调将屏幕移动到某个位置？

2 个答案: