使用jQuery滚动到锚链接[重复]

Posted 2023-03-10

【中文标题】使用jQuery滚动到锚链接[重复]

【英文标题】：Scrolling to an anchor link with jQuery [duplicate]

【发布时间】：2013-05-08 03:02:17

【问题描述】：

我的页面顶部有一个链接到#here。如何使页面向下滚动到带有#here 的锚链接？我一直在访问 Google 和 jQuery 网站，但不知道该怎么做。 JS代码就是我的全部了。

html：

<div class="container">
    <div class="header">
       <a class="link" href="#here">Here</a>
    </div>

    <div class="footer">
       <a id="here"></a>
       <p>Some text...</p>
    </div>
</div>

JS：

$('.link').click(function() 
    $(this).scroll()
);

【参考方案1】：

您可以添加：

$('.link').click(function() 
  $("html, body").animate( scrollTop: $('#here').offset().top , 1000);
);

【讨论】：

谢谢。正是我想要的。

你没有阻止这里的默认行为。

【参考方案2】：

如果您将浏览器的位置设置为主题标签，则浏览器应滚动到该位置。

$('.link').click(function() 
   windows.location = $(this).attr('href');
);

【讨论】：

也感谢您的时间和帮助。

【参考方案3】：

这个插件有一些不错的功能和特性（比如不同的动画）： http://demos.flesler.com/jquery/scrollTo/

"所有匹配的元素都会被滚动，例如：

$('div.pane').scrollTo(...);//all divs w/class pane

如果需要滚动窗口（屏幕），那么使用：

$.scrollTo(...);//the plugin will take care of this"