Moo*_*oon 119 html javascript jquery pageload page-refresh
我正在建立一个我用div
s 发布的网站.当我将页面滚动到位置X后刷新页面,然后页面加载滚动位置为X.
如何强制页面在页面刷新时滚动到顶部?
我能想到的是一些JS或jQuery作为onLoad()
页面的功能运行来设置页面滚动到顶部.但我不知道我怎么能这样做.
一个更好的选择是,如果有一些属性或某些东西使页面加载其默认的滚动位置(即在顶部),这将有点像页面加载,而不是页面刷新.
Pat*_*Pat 156
您可以使用DOM ready上的scrollTop方法执行此操作:
$(document).ready(function(){
$(this).scrollTop(0);
});
Run Code Online (Sandbox Code Playgroud)
Pro*_*daa 147
对于简单的纯 JavaScript实现:
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
Run Code Online (Sandbox Code Playgroud)
Ben*_*Ben 34
这里的答案不适用于safari,document.ready经常被解雇太早.
应该使用beforeunload
阻止你做某事的事件setTimeout
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
Run Code Online (Sandbox Code Playgroud)
小智 15
要重置窗口滚动回到顶部,$(window).scrollTop(0)
在 beforeunload 事件中会执行一些技巧,但是,我在 Chrome 80 中进行了测试,它会在重新加载后返回到旧位置。
为了防止这种情况,设置history.scrollRestoration
到"manual"
。
//Reset scroll top
history.scrollRestoration = "manual";
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
Run Code Online (Sandbox Code Playgroud)
xox*_*xel 14
同样,最好的答案是:
__CODE__
(那就是非jQuery,如果你正在搜索JQ方法,请查询)
编辑:有点错误它的"onbeforunload":) Chrome和其他浏览器"记住"最后一个滚动位置befor unloading,所以如果你将值设置为0,0只是卸载你的页面他们会记住0,0和不会滚动回到滚动条所在的位置:)
pec*_*ata 11
JS History API 具有scrollRestoration 属性,当设置为manual 时,可以防止恢复页面上最后一个滚动位置:
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
} else {
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
}
Run Code Online (Sandbox Code Playgroud)
在这里检查jQuery .scrollTop()
函数
它看起来像
$(document).load().scrollTop(0);
Run Code Online (Sandbox Code Playgroud)
你也可以试试
$(document).ready(function(){
$(window).scrollTop(0);
});
Run Code Online (Sandbox Code Playgroud)
如果要在x位置滚动,则可以将0的值更改为x.
相反location.reload()
,只需使用location.href = location.href
。它不会像以前那样滚动到上一个位置location.reload()
。
注意:如果网址中包含#号,则不会重新加载
小智 5
<script> location.hash = (location.hash) ? location.hash : " "; </script>
Run Code Online (Sandbox Code Playgroud)
将上面的脚本放在<head>
html 的标记中。不确定单页应用程序的行为方式!但在普通页面中确实可以发挥魅力。