重新加载浏览器不会将页面重置到顶部。

Question

当您单击刷新时，浏览器应该将页面重置到顶部，但我发现这并不总是生效。我正在使用一个 js 折叠菜单，在刷新后，它会关闭折叠菜单，但不会将页面重新定位到顶部。

http://imip.rvadv.com/index3.html

- imakeitpretty

---

与JavaScript无关，那是浏览器的默认操作。 - freefaller

如果您刷新页面，Chrome不会重置页面的滚动位置。 - Frank Fang

Answer 1

你可以看到，它并没有 :)

但是你可以使用一些简单的jQuery来强制它：

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

编辑：

在IE 9、FF 12和Chrome 20.0中似乎唯一有效的方法是以下内容：

$(document).ready(function(){
    $('html').animate({scrollTop:0}, 1);
    $('body').animate({scrollTop:0}, 1);
});

奇怪的是，当我直接滚动元素而没有应用任何动画（即 $('html').scrollTop(0)）时，它不起作用。由于持续时间设置为1毫秒，用户将不会注意到任何变化。

如果有人能解释一下这个现象，那我会很高兴 - 为什么只有使用动画才能滚动？

- Nikola Anusev

---

在IE9中，我仍然看到它跳动。它会跳到顶部，然后又跳回到原来的位置。我希望能看到更平滑的效果。向上滑动会很好，因为我的手风琴的其余部分都是这样做的。 - imakeitpretty

在Chrome浏览器中，“自动滚动”似乎是在加载时发生的，而不是在“准备就绪”时发生的。 - commonpike

即使在onload事件中，我也必须将其添加到事件队列中以中断浏览器的行为。您可以使用setTimeout(...,0)将其添加到事件队列中。这可能也是您的animate()函数所做的。因此，您可以使用以下代码：$(window).on('load',function() {setTimeout(function () { $('html,body').scrollTop(0) },0); }); - commonpike

Answer 2

如果上述方法都不起作用，请尝试以下方法。这将欺骗浏览器，在刷新前认为它已经在文档的顶部。

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

- Nikhil Nanjappa

Answer 3

浏览器在重新加载页面后，会滚动到你之前所在的位置，作为方便之举。这只在页面过长时才真正有用。

你可以像如下这样“修复”它：

window.onload = function() {document.body.scrollTop = document.documentElement.scrollTop = 0;};

- Niet the Dark Absol

---

这在火狐浏览器中可以工作，但在谷歌浏览器中不能，在IE中它表现得很差。屏幕在正确执行之前会闪烁一下。 - imakeitpretty

Answer 4

根据comonpyke的上一条评论和我的测试，我建议

$(document).ready(function(){
    $('html, body').scrollTop(0);

    $(window).on('load', function() {
    setTimeout(function(){
        $('html, body').scrollTop(0);
    }, 0);
 });
});

• 第一种情况：在文档准备好之后，scrollTop会早早滚动。
• 第二种情况：在加载事件之后，scrollTop会晚滚动，并且需要等待一段时间。

- user1680948