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

Question

如果您单击Hardly Code's website上的导航链接，浏览器将滚动到页面的另一部分。

有谁能告诉我一些重现这种效果的好的阅读材料吗？我正在使用jquery，并且希望动画像在hardlycode.com上一样流畅

Answer 1

该命令为

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

或者，如果链接具有scrolltop_btn类

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

作为catch效果，在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系统的补充。