jQuery .scrollTop(); +动画 [英] jQuery .scrollTop(); + animation
问题描述
我将页面设置为单击按钮时滚动到顶部.但是首先,我使用了if语句来查看页面顶部是否未设置为0.然后,如果不是0,则设置页面动画以滚动到顶部.
I set the page to scroll to top when a button is clicked. But first I used an if statement to see if the top of the page was not set to 0. Then if it's not 0 I animate the page to scroll to the top.
var body = $("body");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
body.animate({scrollTop:0}, '500');
}
现在,棘手的部分是在页面滚动到顶部后对某些内容进行动画处理.所以我的下一个想法是,找出页面位置是什么.因此,我使用控制台日志来查找.
The tricky part now is animating something AFTER the page has scrolled to the top. So my next thought is, find out what the page position is. So I used console log to find out.
console.log(top); // the result was 365
这给了我365的结果,我想这就是我滚动到顶部之前的位置编号.
This gave me a result of 365, I'm guessing that is the position number I was at just before scrolling to the top.
我的问题是如何将位置设置为0,以便我可以添加在页面为0时运行的另一个动画?
My question is how do I set the position to be 0, so that I can add another animation that runs once the page is at 0?
谢谢!
推荐答案
为此,您可以为animate命令设置一个回调函数,该函数将在滚动动画结束后执行.
To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished.
例如:
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
警报代码所在的位置,您可以执行更多的JavaScript来添加更多动画.
Where that alert code is, you can execute more javascript to add in further animation.
此外,摆动"在那里设置宽松.查看 http://api.jquery.com/animate/了解更多信息.
Also, the 'swing' is there to set the easing. Check out http://api.jquery.com/animate/ for more info.
这篇关于jQuery .scrollTop(); +动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!