Question

我正在建立一个我用div发布的网站。当我将页面滚动到位置X后刷新页面，然后页面加载滚动位置为X.

如何强制页面在页面刷新时滚动到顶部？

我能想到的是一些JS或jQuery作为页面的onLoad()函数运行到 SET 页面滚动到顶部。但我不知道如何做到这一点。
更好的选择是，如果有一些属性或某些内容将页面加载其默认滚动位置（即在顶部），这将有点像页面加载而不是页面刷新。

Answer 1

您可以使用scrollTop上的DOM ready方法执行此操作：

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

Answer 2

对于简单的 plain JavaScript实现：

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}

Answer 3

这里的答案不适用于野生动物园， document.ready经常被解雇太早。

应该使用beforeunload事件阻止你形成一些setTimeout

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});

Answer 4

您也可以尝试

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

如果要在x位置滚动，可以将0的值更改为x。

Answer 5

检查jQuery .scrollTop()函数here

看起来像

$(document).load().scrollTop(0);

Answer 6

同样，最佳答案是：

window.onbeforeunload = function () { window.scrollTo(0,0);

（那就是非jQuery，如果你正在搜索JQ方法，请查找）

编辑：有点错误“onbeforunload”:) Chrome和其他浏览器“记住”最后一个滚动位置以便卸载，因此如果您将值设置为0,0只是卸载您的页面，他们将记住0,0并且不会滚动回滚动条所在的位置：）

Answer 7

要重置窗口，请滚动回到顶部，beforeunload事件中的[7,2,10,5,7,4,9,1,8,0,3,7,6]可以解决问题，但是，我在Chrome 80中进行了测试，重新加载后它会回到原来的位置。

为防止这种情况，请将$(window).scrollTop(0)设置为history.scrollRestoration。

"manual"

Answer 8

而不是location.reload()，只需使用location.href = location.href即可。它不会像location.reload()那样滚动到上一个位置。

注意：如果网址中有＃

，则不会重新加载

Answer 9

如果页面中有视频，则此处的答案（在$(document).ready中滚动）不起作用。在这种情况下，在触发此事件后页面会滚动，从而覆盖我们的工作。

最佳答案应该是：

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});

Answer 10

<script> location.hash = (location.hash) ? location.hash : " "; </script>

将上述脚本放在html的<head>标记中。不确定单页应用程序的行为！但在常规页面中肯定会像魅力一样。

Answer 11

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

对我来说不起作用，因为谷歌浏览器会在页面加载后向下滚动。我用的是

$(document).ready(function() {
    var url = window.location.href;
    console.log(url);
    if( url.indexOf('#') < 0 ) {
        window.location.replace(url + "#");
    } else {
        window.location.replace(url);
    }
});

//这会在页面末尾加载＃。所以它总是会加载到顶部。

Answer 12

JS 历史 API 有 scrollRestoration 属性，当设置为手动时，防止页面上的最后滚动位置被恢复：

if (history.scrollRestoration) {
    history.scrollRestoration = 'manual';
} else {
    window.onbeforeunload = function () {
        window.scrollTo(0, 0);
    }
}

Answer 13

这是最好的方法之一：

<script>
$(window).on('beforeunload', function() {
  $('body').hide();
  $(window).scrollTop(0);
});
</script>

Answer 14

超级校准的Expexpidoidocious答案是：

将此添加到 js 文件或脚本标签

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari

Answer 15

我发现这些CSS样式会迫使页面在重新加载/刷新时始终滚动到顶部：

html {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}

Answer 16

您可以使用 location.replace 代替 location.reload：

location.replace(location.href);

这样页面将重新加载并在顶部滚动。

在HTML中以页面刷新强制页面滚动位置到顶部

16 个答案: