在 HTML 中的页面刷新时强制页面滚动位置到顶部答案

【问题标题】：Force page scroll position to top at page refresh in HTML在 HTML 中的页面刷新时强制页面滚动位置到顶部
【发布时间】：2011-04-09 12:39:11
【问题描述】：

我正在建立一个网站，我将使用divs 发布该网站。当我在页面滚动到位置 X 后刷新页面时，页面加载时滚动位置为 X。

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

我能想到的是一些 JS 或 jQuery 作为页面的onLoad() 函数运行来SET 页面滚动到顶部。但我不知道我该怎么做。
更好的选择是如果有一些属性或某些东西可以让页面加载时默认滚动位置（即在顶部），这有点像 页面加载 , 而不是 页面刷新。

【问题讨论】：

令人惊讶的是，这里没有一个解决方案对我有用，但这个解决方案对我有用：stackoverflow.com/a/11486546/470749

标签： javascript jquery html pageload page-refresh

【解决方案1】：

对于一个简单的普通 JavaScript 实现：

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

【讨论】：

@Paul12_ - 我刚刚在Safari 11.0.3 上测试过，对我来说没问题，你用的是哪一个？
这对我不起作用。我必须从 onbeforeload 函数返回才能使其工作。
@Iqbal -- 你return做了什么？
这会在 Chrome 中引发以下错误：Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.
添加document.querySelector('html').style.scrollBehavior = ''; 也可能是必要的。如果设置为smooth，在页面重新加载之前它可能不会到达顶部。

【解决方案2】：

您可以在DOM ready 上使用scrollTop 方法：

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

【讨论】：

不适用于 Safari。但这 -> stackoverflow.com/a/18633915/102133 确实如此。

【解决方案3】：

这里的答案不适用于 safari， document.ready 通常被过早触发。

应该使用beforeunload 事件来阻止你做一些setTimeout

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

【讨论】：

滚动功能后添加：$('html').text(''); ,所以婴儿车将被重置
@Userpassword 你不觉得 $("html").remove() 会更好吗？

【解决方案4】：

同样，最佳答案是：

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

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

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

【讨论】：

@Paul12_ Safari 需要document.documentElement.scrollTop 才能工作。不过我通常两者都用。

【解决方案5】：

要将窗口滚动重置回顶部，beforeunload 事件中的$(window).scrollTop(0) 可以解决问题，但是，我在 Chrome 80 中进行了测试，它会在重新加载后回到旧位置。

为防止这种情况发生，请将history.scrollRestoration 设置为"manual"。

//Reset scroll top

history.scrollRestoration = "manual";

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

【讨论】：

这对我来说是最好的回应，适用于 Chrome/Linux
这很棒。在多页的情况下，只需在我使第二页可见后，将两行 history.scrollRestoration = "manual"; 和 $(window).scrollTop(0); 添加到 js 函数中。

【解决方案6】：

检查 jQuery .scrollTop() 函数 here

看起来像

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

【讨论】：

【解决方案7】：

你也可以试试

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

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

这是一个很好的答案，如果您正在处理一个您知道浏览器会支持它的项目，您甚至可以简单地使用history.scrollRestoration = 'manual'; oneliner。
谢谢，如果您使用 SSR 并且窗口不可用，更改为一个班轮可能会有所不同。

【解决方案9】：

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

注意：如果 URL 中有任何 #，则不会重新加载

【讨论】：

【解决方案10】：

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

把上面的脚本放在你html的<head>标签中。不确定单页应用程序的行为方式！但在常规页面中确实可以发挥魅力。

【讨论】：

【解决方案11】：

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

最佳答案应该是：

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

【讨论】：

【解决方案12】：

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

对我不起作用，因为 google chrome 在页面加载完成后只会向下滚动。我用的是

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

// 这会加载以 # 结尾的页面。所以它总是在顶部加载。

【讨论】：

【解决方案13】：

这是最好的方法之一：

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

【讨论】：

【解决方案14】：

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

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

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

【讨论】：

【解决方案15】：

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

location.replace(location.href);

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

【讨论】：

这似乎有效，但我找不到解释它为什么有效的文档。如果有人有，请分享！

【解决方案16】：

超级脆弱的expialidocious答案是：

将此添加到您的 js 文件或 脚本标记

的顶部

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

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

【讨论】：