jQuery .scrollTop(); + 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16475198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .scrollTop(); + animation
提问by Juan Di Diego
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.
我将页面设置为单击按钮时滚动到顶部。但首先我使用 if 语句来查看页面顶部是否未设置为 0。然后如果它不是 0，我将页面动画化以滚动到顶部。
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
This gave me a result of 365, I'm guessing that is the position number I was at just before scrolling to the top.
这给了我 365 的结果，我猜这是我在滚动到顶部之前所在的位置编号。
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?
我的问题是如何将位置设置为 0，以便我可以添加另一个在页面为 0 时运行的动画？
Thanks!
谢谢！
回答by Thomas Stiegler
To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished.
为此，您可以为 animate 命令设置回调函数，该函数将在滚动动画完成后执行。
For example:
例如：
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
alert("Finished animating");
});
Where that alert code is, you can execute more javascript to add in further animation.
警报代码所在的位置，您可以执行更多 javascript 以添加更多动画。
Also, the 'swing' is there to set the easing. Check out http://api.jquery.com/animate/for more info.
此外，“摆动”用于设置缓动。查看http://api.jquery.com/animate/了解更多信息。
回答by Shailesh
Try this code:
试试这个代码：
$('.Classname').click(function(){
?$("html, body").animate({ scrollTop: 0 }, 600);
?return false;
});
回答by Beep
Use this:
用这个：
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
}
});
回答by The Mechanic
for this you can use callback method
为此，您可以使用回调方法
body.animate({
scrollTop:0
}, 500,
function(){} // callback method use this space how you like
);
回答by Kishan Patel
Try this instead:
试试这个：
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');
});
}
回答by T.Todua
Simple solution:
简单的解决方案：
scrolling to any element by ID or NAME:
按 ID 或 NAME 滚动到任何元素：
SmoothScrollTo("#elementId", 1000);
code:
代码：
function SmoothScrollTo(id_or_Name, timelength){
var timelength = timelength || 1000;
$('html, body').animate({
scrollTop: $(id_or_Name).offset().top-70
}, timelength, function(){
window.location.hash = id_or_Name;
});
}
回答by Scorby
Code with click function()
带有点击功能的代码（）
var body = $('html, body');
$('.toTop').click(function(e){
e.preventDefault();
body.animate({scrollTop:0}, 500, 'swing');
});
.toTop= class of clicked element maybe imgor a
.toTop= 单击元素的类可能img或a
回答by Junaid
jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() {
alert("Finished animating");
});
回答by Remal Mahmud
you must see this
你必须看到这个
$(function () {
$('a[href*="#"]:not([href="#"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
or try them
或尝试它们
$(function () {$('a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 600);
return false;});});
回答by Amanverma Lucky
$("body").stop().animate({
scrollTop: 0
}, 500, 'swing', function () {
console.log(confirm('Like This'))
}
);
