我想平滑地向下滚动。我不想为此写一个函数——特别是如果jQuery已经有了一个。
当前回答
如果你想在页面的末尾向下移动(所以你不需要向下滚动到底部),你可以使用:
$('body').animate({ scrollTop: $(document).height() });
其他回答
你可以使用jQuery动画滚动页面与特定的持续时间:
$("html, body").animate({scrollTop: "1024px"}, 5000);
其中1024px是滚动偏移量,5000是以毫秒为单位的动画持续时间。
尼克的回答很好,默认设置也很好,但你可以通过完成所有可选设置来更全面地控制滚动。
下面是它在API中的样子:
.animate( properties [, duration] [, easing] [, complete] )
所以你可以这样做:
.animate(
{scrollTop:'300px'},
300,
swing,
function(){
alert(animation complete! - your custom code here!);
}
)
这是jQuery .animate函数的api页面:http://api.jquery.com/animate/
$(".scroll-top").on("click", function(e){
e.preventDefault();
$("html, body").animate({scrollTop:"0"},600);
});
就像Kita提到的有多个回调发射的问题,当你在“html”和“身体”动画。我更倾向于使用一些基本的特征检测,只对单个对象的scrollTop属性进行动画处理,而不是同时对两者进行动画处理并阻塞后续的回调。
在这个另一个线程上接受的答案给出了一些关于哪个对象的scrollTop属性我们应该尝试动画:pageYOffset滚动和动画在IE8
// UPDATE: don't use this... see below
// only use 'body' for IE8 and below
var scrollTopElement = (window.pageYOffset != null) ? 'html' : 'body';
// only animate on one element so our callback only fires once!
$(scrollTopElement).animate({
scrollTop: '400px' // vertical position on the page
},
500, // the duration of the animation
function() {
// callback goes here...
})
});
更新- - -
上述特征检测的尝试失败了。似乎没有一行的方法来做它,因为webkit类型的浏览器pageYOffset属性总是返回零时,有一个doctype。 相反,我找到了一种方法,使用承诺做一个单一的回调每次动画执行。
$('html, body')
.animate({ scrollTop: 100 })
.promise()
.then(function(){
// callback code here
})
});
跨浏览器代码是:
$(window).scrollTop(300);
它没有动画,但在任何地方都适用
推荐文章
- Angular ng-repeat反过来
- 如何获得请求路径与表达请求对象
- 使用Handlebars 'each'循环访问父对象的属性
- 盎格鲁- ngcloak / ngg展示blink元素
- 禁用表单自动提交按钮单击
- 节点和错误:EMFILE,打开的文件太多
- JavaScript函数中的默认参数值
- 使用RegExp.exec从字符串中提取所有匹配项
- 测试一个值是奇数还是偶数
- 空数组似乎同时等于true和false
- 它是可能的动画scrollTop与jQuery?
- 我需要哪个选择器来选择一个文本选项?
- 如何清除下拉框中的所有选项?
- 如何添加ID属性Html.BeginForm()在asp.net mvc?
- 基于原型的继承与基于类的继承