在 HTML 中强制页面滚动位置在页面刷新时位于顶部

我正在建立一个网站，我与 divs 出版。当我在页面滚动到 X 位置后刷新页面时，页面将以 X 的滚动位置加载。

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

  • 我能想到的是一些 JS 或者 jQuery 作为 onLoad()函数运行页面到 预备页面滚动到顶部。但我不知道该怎么做。

  • 一个更好的选择是，如果有一些属性或者一些东西将页面的滚动位置加载为默认值(即在顶部) ，这有点像 页面加载，而不是 刷新页面。

397596 次浏览
小开

检查 jQuery.scrollTop()函数 给你

看起来像是

$(document).load().scrollTop(0);
小开
最佳答案

你可以使用 DOM 准备好了上的 ScrollTop方法:

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

你也可以试试

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

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

小开

这里的答案不适用于狩猎旅行, Ready 通常被过早地激发。

应该使用 beforeunload事件，防止你做一些 setTimeout

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

对于一个简单的 平淡无奇 JavaScript 实现:

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

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

将上面的脚本放在 html 的 <head>标记中。不确定单页应用程序是如何工作的！但是在普通的书页里，确实很有魅力。

小开 
$(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);
}
});

//这会在页面末尾加载一个 # ，所以它总是在页面顶部加载。

小开

同样，最佳答案是:

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

(对于非 jQuery，如果正在搜索 JQ 方法，请查找)

编辑: 一个小错误，它的“ onbefore 卸载”:) Chrome 和其他浏览器会“记住”卸载前最后一个滚动条的位置，所以如果你在卸载页面之前将值设置为0,0，浏览器就会记住0,0，而不会滚动回滚动条的位置:)

小开

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

最佳答案应该是:

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

使用 location.href = location.href代替 location.reload()，它不会像 location.reload()那样滚动到以前的位置。

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

小开

超级酷毙宇宙世界霹雳无敌棒的答案是:

将它添加到 JS文件或 脚本标签文件的顶部

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


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

为了重置窗口滚动回到顶部，$(window).scrollTop(0)在 before unload 事件中做了这些技巧，但是，我在 Chrome 80中测试了它会在重新加载后返回到原来的位置。

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

//Reset scroll top


history.scrollRestoration = "manual";


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

这是实现这一目标的最佳方式之一:

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

小开

我发现这些 CSS 样式迫使页面总是在重新加载/刷新时滚动到顶部:

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


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

你可以用 位置，替换代替 位置，重新装弹:

location.replace(location.href);

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

小开

JS 历史 API 具有 scrollRecovery 属性，当设置为手动时，该属性可防止恢复页面上的最后一个滚动位置:

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

你可以用它你的 html 页面 作为:

history.scrollRestoration = "manual";


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

提交答案