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

Moo*_*oon 119 html javascript jquery pageload page-refresh

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

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

  • 我能想到的是一些JS或jQuery作为onLoad()页面的功能运行来设置页面滚动到顶部.但我不知道我怎么能这样做.

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

Pat*_*Pat 156

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

$(document).ready(function(){
    $(this).scrollTop(0);
});
Run Code Online (Sandbox Code Playgroud)

  • 但是这个 - > http://stackoverflow.com/a/18633915/102133. (8认同)
  • 或者`$(document).scrollTop(0);`无论如何,谢谢你的作品. (3认同)

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)

  • 这是对我来说最好的回应,适用于 Chrome/Linux (2认同)

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)


jon*_*aze 9

这里检查jQuery .scrollTop()函数

它看起来像

$(document).load().scrollTop(0);
Run Code Online (Sandbox Code Playgroud)


Ank*_*att 9

你也可以试试

$(document).ready(function(){
    $(window).scrollTop(0);
});
Run Code Online (Sandbox Code Playgroud)

如果要在x位置滚动,则可以将0的值更改为x.


Nau*_*hal 7

相反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 的标记中。不确定单页应用程序的行为方式!但在普通页面中确实可以发挥魅力。