如何将JQuery与锚点标记配合使用，将屏幕移动到某个位置

How do I use JQuery in coordination with an anchor tag to move the screen to a location?

本文关键字：屏幕 移动 位置 JQuery      更新时间：2023-09-26

我以前从未处理过这个问题，所以如果我用了太多的词来定义我想要的东西，我不确定是否道歉。

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

代码结构：

 <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将他们慢慢拖动到该部分，联系人也是如此？"？

只需在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/

您可以使用jqueryscrollTo.js脚本来平滑滚动

或

只需在href标记中提供节的id，就可以链接到要滚动的节，如>>

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

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

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

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

与之相关的代码是>>

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

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

2） 将其包含在头标签中

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

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

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