我正在建立一个我用divs 发布的网站。当我在页面滚动到位置 X 后刷新页面时，页面加载时滚动位置为 X。
如何在页面刷新时强制页面滚动到顶部？
我能想到的是一些 JS 或 jQuery 作为
onLoad()页面的功能运行以将页面滚动到顶部。但我不知道我怎么能做到这一点。一个更好的选择是，如果有一些属性或某些东西可以让页面加载时默认滚动位置（即在顶部），这有点像page load，而不是page refresh。
问问题
366325 次
16 回答
223
对于一个简单的纯JavaScript 实现：
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}于 2014-11-10T06:12:11.437 回答
187
您可以使用DOM ready上的scrollTop方法来做到这一点：
$(document).ready(function(){
$(this).scrollTop(0);
});
于 2010-09-08T03:15:41.587 回答
39
这里的答案不适用于 safari，document.ready 经常被过早解雇。
应该使用beforeunload阻止你做一些事情的事件setTimeout
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
于 2014-04-26T15:05:06.910 回答
27
同样，最佳答案是：
window.onbeforeunload = function () {
window.scrollTo(0,0);
};
（那是非 jQuery 的，如果您正在搜索 JQ 方法，请查找）
编辑：一个小错误它的“onbeforunload” :) Chrome 和其他浏览器“记住”卸载前的最后滚动位置，所以如果你在卸载页面之前将值设置为 0,0，他们会记住 0,0 并获胜'不要滚动回滚动条所在的位置:)
于 2016-09-07T12:42:38.157 回答
18
要将窗口滚动重置回顶部，$(window).scrollTop(0)在 beforeunload 事件中执行技巧，但是，我在 Chrome 80 中测试它会在重新加载后回到旧位置。
为防止这种情况，请将 设置history.scrollRestoration为"manual"。
//Reset scroll top
history.scrollRestoration = "manual";
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
于 2020-04-02T14:40:16.247 回答
10
于 2010-09-08T03:15:16.823 回答
10
你也可以试试
$(document).ready(function(){
$(window).scrollTop(0);
});
如果要在 x 位置滚动，则可以将 0 的值更改为 x。
于 2013-05-29T04:53:00.463 回答
8
JS 历史 API 具有 scrollRestoration 属性，当设置为手动时，会阻止恢复页面上的最后一个滚动位置：
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
} else {
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
}
于 2021-04-26T14:26:02.593 回答
7
而不是location.reload()，只需使用location.href = location.href. 它不会像以前那样滚动到上一个位置location.reload()。
注意：如果 URL 中有任何 #，则不会重新加载
于 2017-01-12T16:17:00.890 回答
5
<script> location.hash = (location.hash) ? location.hash : " "; </script>
将上面的脚本放在<head>html 的标签中。不确定单页应用程序的行为方式！但在普通页面中，它确实像魅力一样。
于 2016-01-26T22:47:30.710 回答
4
如果页面中有视频，则此处的答案（滚动$(document).ready）不起作用。在这种情况下，在触发此事件后页面会滚动，从而覆盖我们的工作。
最佳答案应该是：
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
于 2017-01-12T12:12:19.240 回答
3
$(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);
}
});
// 这会加载最后带有 # 的页面。所以它总是在顶部加载。
于 2016-08-18T09:54:45.157 回答
2
这是最好的方法之一：
<script>
$(window).on('beforeunload', function() {
$('body').hide();
$(window).scrollTop(0);
});
</script>于 2020-10-22T16:48:30.430 回答
1
我发现这些 CSS 样式会强制页面在重新加载/刷新时始终滚动到顶部：
html {
height: 100%;
overflow: hidden;
width: 100%;
}
body {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
}
于 2020-12-09T17:20:05.823 回答
1
您可以使用location.replace代替location.reload：
location.replace(location.href);
这样页面将在顶部滚动重新加载。
于 2020-12-23T10:05:52.243 回答
0
supercalifragilisticexpialidocious 的答案是：
将此添加到您的js文件或脚本标记的顶部
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
document.body.scrollTop = 0; // For Safari
于 2019-08-30T07:35:38.537 回答