我想平滑地向下滚动。我不想为此写一个函数——特别是如果jQuery已经有了一个。
当前回答
尼克的回答很管用。在animate()调用中指定complete()函数时要小心,因为它将被执行两次,因为你声明了两个选择器(html和body)。
$("html, body").animate(
{ scrollTop: "300px" },
{
complete : function(){
alert('this alert will popup twice');
}
}
);
下面是避免双重回调的方法。
var completeCalled = false;
$("html, body").animate(
{ scrollTop: "300px" },
{
complete : function(){
if(!completeCalled){
completeCalled = true;
alert('this alert will popup once');
}
}
}
);
其他回答
你可以使用.animate() scrollTop属性,就像这样:
$("html, body").animate({ scrollTop: "300px" });
跨浏览器代码是:
$(window).scrollTop(300);
它没有动画,但在任何地方都适用
但如果你真的想在滚动时添加一些动画,你可以试试我的简单插件(AnimateScroll),它目前支持30多种easing样式
你可以使用jQuery动画滚动页面与特定的持续时间:
$("html, body").animate({scrollTop: "1024px"}, 5000);
其中1024px是滚动偏移量,5000是以毫秒为单位的动画持续时间。
就像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
})
});
推荐文章
- 右击是Javascript事件吗?
- 如何找到JavaScript数组中包含的最大数字?
- 在数组中获取所有选中的复选框
- 如何为Firebase构建云函数,以便从多个文件部署多个函数?
- 如何发送推送通知到web浏览器?
- AngularJS:工厂和服务?
- js:将一个组件包装成另一个组件
- 父ng-repeat从子ng-repeat的访问索引
- JSHint和jQuery: '$'没有定义
- 模仿JavaScript中的集合?
- 用JavaScript验证电话号码
- 如何在HTML5中改变视频的播放速度?
- 谷歌地图API v3:我可以setZoom后fitBounds?
- 用jQuery检查Internet连接是否存在?
- 如何使用滑动(或显示)函数在一个表行?