是否有任何替代方法可用于将浏览器滚动到页面顶部的功能?现在我正在使用:$('html, body').animate({scrollTop: '0px'}, 300);
。
是否还有其他东西,或者不是 jQuery 的东西?
是否有任何替代方法可用于将浏览器滚动到页面顶部的功能?现在我正在使用:$('html, body').animate({scrollTop: '0px'}, 300);
。
是否还有其他东西,或者不是 jQuery 的东西?
下面是 scrollTop 函数的纯 JavaScript 实现。它使用 setInterval 作为异步 while 循环,周期性地递减 pageYOffset 值,该值表示相对于页面顶部的滚动条位置。
澄清一下,while 循环会阻止页面上的其他脚本运行,并且会立即滚动到顶部,而与 step 值无关。然而,具有 50 毫秒迭代的 setInterval 只会每 50 毫秒阻塞一次页面,并且会在每次单独的迭代后更新滚动条 UI。
该函数采用单个参数“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);
当偏移量达到 0 时,间隔停止,这意味着滚动条已到达页面顶部。
但是,计数检查器会将操作限制为仅 150 次迭代,以防止您锁定浏览器,以防您决定对其进行修改。否则,您可以删除该条件。
Hiya工作演示 http://jsfiddle.net/jqj9T/5/ 或 http://jsfiddle.net/jqj9T/5/show/
这就是你要找的吗,在 IE - 8 中也检查过,这个版本有效。
http://api.jquery.com/animate/
http://api.jquery.com/scrollTop/
希望这可以帮助,
请注意,我从 150 开始演示/展示它是如何工作的,您可以根据自己的情况将其更改为 0。
另一个使用慢的版本:http: //jsfiddle.net/jqj9T/7/
jQuery代码
if( $('html,body').scrollTop() != 150 ){
$('html,body').animate({scrollTop: $(window).scrollTop() + 150}, 300);
}