javascript 是否有 jQuery scrollTop 的替代品？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10661896/
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
Are there alternatives to jQuery scrollTop?
提问by d-_-b
Are there any alternatives that can be used in a function to scroll a browser to the top of the page? Right now I'm using: $('html, body').animate({scrollTop: '0px'}, 300);.
是否有任何替代方法可用于将浏览器滚动到页面顶部的功能？现在我正在使用：$('html, body').animate({scrollTop: '0px'}, 300);。
Is there maybe something else, or something that is not jQuery?
也许还有其他东西，或者不是 jQuery 的东西？
采纳答案by jmort253
Below is a pure JavaScript implementation of a scrollTop function. It uses setInterval as an asynchronous while loop that periodically decrements the pageYOffset value, which represents the scrollbar position relative to the top of the page.
下面是一个 scrollTop 函数的纯 JavaScript 实现。它使用 setInterval 作为异步 while 循环，周期性地减少 pageYOffset 值，该值表示相对于页面顶部的滚动条位置。
To clarify, a while loop would block other scripts on the page from running and would make the scroll to the top appear instant, irregardless of the step value. Whereas, a setInterval with a 50ms iteration would only block the page once every 50ms and would update the scrollbar UI after each individual iteration.
澄清一下，while 循环会阻止页面上的其他脚本运行，并使滚动到顶部立即出现，而不管步长值如何。而具有 50 毫秒迭代的 setInterval 只会每 50 毫秒阻塞一次页面，并且会在每次迭代后更新滚动条 UI。
The function takes a single parameter "step", which determines the rate that the scrollbar moves to the top of the screen. The smaller the step, the slower the rate in which the scrollbar moves to the top.
该函数采用单个参数“step”，它确定滚动条移动到屏幕顶部的速率。步长越小，滚动条移到顶部的速度就越慢。
function scrollTop(step) {
var start = window.pageYOffset;
var count = 0;
var intervalRef = setInterval( (function(interval, curOffset) {
return function() {
curOffset -= (interval * step);
console.info("offset = " + curOffset);
window.scrollTo(0, curOffset);
console.info("pageYoffset = " + window.pageYOffset);
count++;
if(count > 150 || curOffset < 0) clearInterval(intervalRef);
}
})(step, start--), 50);
}
// scroll to the top from the middle of the page in about 5 seconds.
scrollTop(5);
// scroll to the top in about 1 second
scrollTop(15);
// scrolls to the top very fast!
scrollTop(35);
The interval is halted when the offset reaches 0, which means the scrollbar has reached the top of the page.
当偏移量达到 0 时，间隔停止，这意味着滚动条已到达页面顶部。
However, the count checker is there to limit the action to just 150 iterations to prevent you from locking up your browser, in case you decide to modify it. Otherwise, you can remove that condition.
但是，计数检查器可以将操作限制为仅 150 次迭代，以防止您锁定浏览器，以防您决定对其进行修改。否则，您可以删除该条件。
回答by Tats_innit
Hiya working demohttp://jsfiddle.net/jqj9T/5/orhttp://jsfiddle.net/jqj9T/5/show/
Hiya工作演示http://jsfiddle.net/jqj9T/5/或http://jsfiddle.net/jqj9T/5/show/
Is this what you are looking for, checked in IE - 8 as well, this version works.
这是您要查找的内容吗？也在 IE - 8 中进行了检查，此版本有效。
http://api.jquery.com/animate/
http://api.jquery.com/animate/
http://api.jquery.com/scrollTop/
http://api.jquery.com/scrollTop/
Hope this helps,
希望这可以帮助，
Please NoteI have started with 150 to demo/show how it works you can change it to 0 in your case.
请注意，我从 150 开始演示/展示它是如何工作的，您可以在您的情况下将其更改为 0。
another version using slow: http://jsfiddle.net/jqj9T/7/
另一个版本使用慢：http: //jsfiddle.net/jqj9T/7/
Jquery code
查询代码
if( $('html,body').scrollTop() != 150 ){
$('html,body').animate({scrollTop: $(window).scrollTop() + 150}, 300);
}
