一尘不染

如何使用JavaScript / jQuery滚动到页面顶部?

javascript

有没有一种方法可以使用JavaScript / jQuery控制浏览器滚动?

当我向下滚动页面一半,然后触发重新加载时,我希望页面进入顶部,但它会尝试找到最后一个滚动位置。所以我这样做:

$('document').ready(function() {
   $(window).scrollTop(0);
});

但是没有运气。

编辑

因此,当页面加载后,我打电话给您时,您的两个答案都有效。但是,如果我只是在页面上刷新,则看起来浏览器会在.ready事件发生后计算并滚动到其旧的滚动位置(我也测试了body
onload()函数)。

因此,接下来的工作是,有没有一种方法可以防止浏览器滚动到其过去的位置,或者在它完成其工作后重新滚动到顶部?


阅读 245

收藏
2020-05-01

共1个答案

一尘不染

哇,我这个问题迟到了9年。干得好:

将此代码添加到您的onload中。

// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);

history.scrollRestoration浏览器支持:

Chrome:受支持(自46开始)

Firefox:受支持(自46开始)

IE / Edge: 不支持 (尚..)

Opera:受支持(自33起)

Safari:受支持

对于IE / Edge,如果要在其自动向下滚动后重新滚动到顶部,则对我有用:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
}
2020-05-01