我设置了当按钮被点击时页面会滚动到顶部。 但首先我使用了一个if语句来查看页面顶部是否没有被设置为0,然后如果它不是0,我就用动画让页面滚动到顶部。
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
现在棘手的部分是在页面滚动到顶部之后再做一些动画。 所以我的下一个想法是,找出页面的位置是什么。所以我用控制台日志来找出。
console.log(top); // the result was 365
这给了我一个365的结果,我猜测那是我在滚动到顶部之前的位置数。
我的问题是,我如何设置位置为0,以便我可以添加另一个动画,在页面处于0时运行?
谢谢!
要做到这一点,你可以为animate命令设置一个回调函数,它将在滚动动画完成后执行。
比如说
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
在该警报代码的地方,你可以执行更多的javascript,以进一步添加动画。
另外,'swing'是用来设置缓和的。请查看http://api.jquery.com/animate/,了解更多信息。
试试这个。
var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop :0}, 500,function(){
//DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
alert('Hello');
});
}
为此,你可以使用回调方法
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);