单击按钮时滚动到顶部的JavaScript代码

Question

如果您点击Hardly Code's website上的导航链接，浏览器会滚动到页面的其他部分。

有人能指出一些好的阅读材料来重现这种效果吗？我正在使用jquery，并希望动画像在almostcode.com上一样流畅

Answer 1

命令是

$('html,body').animate({scrollTop : 0},'slow');

或者，如果链接有类scrolltop_btn

$('.scrolltop_btn').click(function() {
  $('html,body').animate({scrollTop : 0},'slow');
});

作为捕获效果，如果禁用了javascript，则应始终包含标准HTML锚点。

如果要更改持续时间，可以将“慢”更改为希望效果持续的毫秒数。

Answer 2

使用ScrollTo jQuery插件：http://flesler.blogspot.com/2007/10/jqueryscrollto.html - http://plugins.jquery.com/project/ScrollTo

Answer 3

这是一篇关于使用jQuery执行此操作的博文：Improved Animated Scrolling Script for Same-Page Links

您只需滚动到顶部，但该方法可让您将其指向页面的任何部分，就像使用#anchors时一样。这是渐进增强的一个很好的例子，因为除了已经完全正常运行的无Javascript系统之外，它还具有花哨的Javascript效果。

Answer 4

这是一个很好的：

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

首先尝试演示：

http://demos.flesler.com/jquery/scrollTo/

祝你好运！

Answer 5

一个非常简单的，不需要页内javascript（它只是找到包含锚点的所有链接并使它们滚动）：http://www.kryogenix.org/code/browser/smoothscroll/