我想平滑地向下滚动。我不想为此写一个函数——特别是如果jQuery已经有了一个。
当前回答
$(".scroll-top").on("click", function(e){
e.preventDefault();
$("html, body").animate({scrollTop:"0"},600);
});
其他回答
在其他例子中,动画总是从页面刷新后的页面顶部开始。
我通过不直接动画css来修复这个问题,而是调用window.scrollTo();每一步:
$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
duration: 600,
easing: 'swing',
step: function(val) {
window.scrollTo(0, val);
}
});
这也解决了html vs body的问题,因为它使用跨浏览器的JavaScript。
关于jQuery的animate函数的更多信息,请访问http://james.padolsey.com/javascript/fun-with-jquerys-animate/。
你可以使用.animate() scrollTop属性,就像这样:
$("html, body").animate({ scrollTop: "300px" });
$(".scroll-top").on("click", function(e){
e.preventDefault();
$("html, body").animate({scrollTop:"0"},600);
});
但如果你真的想在滚动时添加一些动画,你可以试试我的简单插件(AnimateScroll),它目前支持30多种easing样式
试试scrollTo插件。