页面重新加载时的 ScrollTop 不起作用（可能的脚本冲突）答案

【问题标题】：ScrollTop on page reload doesn't work (possible script conflict)页面重新加载时的 ScrollTop 不起作用（可能的脚本冲突）
【发布时间】：2013-09-27 18:33:15
【问题描述】：

我正在处理这个页面http://dindita.com/preview.html

当有人刷新页面但似乎不起作用时，我添加了它以使其滚动到顶部，我想知道它是否与我正在使用的其他滚动脚本冲突。

<script type="text/javascript">
    $(document).ready(function(){
    $(this).scrollTop(0);
});
</script>

有什么线索吗？

P.s.：正在进行的工作：乱七八糟的脚本

【问题讨论】：

你可以试试$(this)，而不是$(window) 或$('html, body')。

标签： jquery

【解决方案1】：

试试这个：

$(document).ready(function() {
  $("html,body").animate({scrollTop: 0}, 100); //100ms for example
});

或者这个：

window.onload = function() {
 setTimeout (function () {
  scrollTo(0,0);
 }, 100); //100ms for example
}

或者这个：

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

浏览器在重新加载时往往会跳回到上一个滚动位置，这在许多情况下都是有意义的。似乎在 onload 事件之后立即触发了这种自动跳转（但我们不知道发生这种情况的确切时间），因此使用一些延迟或让浏览器在页面重新加载之前滚动到顶部是有意义的;)

【讨论】：

太棒了！这个答案最后的描述也超级棒。
提示：Chrome 54 和 55 在加载和粘贴某些 html 时再次更改滚动位置（如果在 onload 事件后很少）。

【解决方案2】：

浏览器（至少是 Chrome）在页面加载后更改滚动位置，而不是在 DOM 准备好时。

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

如果这不起作用（脚本仍然在浏览器更改滚动位置之前执行），您可以设置超时：

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

【讨论】：

由于超时，它现在可以在 Firefox 和 Safari 上运行，但不能在 Chrome 上运行
@anoonimo 我发现了这个：stackoverflow.com/questions/7035331/…
在该主题的回复中，我发现到目前为止唯一的解决方案是在 Chrome 上工作，但它是 hackish $(window).on('beforeunload', function()

【解决方案3】：

当我尝试这个并且它奏效时，我有那个尤里卡时刻：

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

在您的 html 的 <head> 中。不确定单页应用程序！但在常规页面中确实可以发挥魅力。

【讨论】：

这是一个解决方案，但只有当您希望 scrollTo(0,0) 更高的 y 值在 chrome 54 中不起作用时，它才会跳转到 0

【解决方案4】：

这是我想出的滚动到顶部的方法，但前提是文档尚未位于顶部，并且延迟到刚好不会导致它正常触发的问题：

$(window).load(function() {
    setTimeout(function() {
        if ($(document).scrollTop() !== 0) $("html, body").animate({ scrollTop: 0 }, 'fast');
}, 300);
});

【讨论】：

【解决方案5】：

调用 scrollTo 并在 10 毫秒内使用计时器再次调用 scrollTo 并将值更改为 1 px 完成了这项工作。为每次强制刷新处理 chrome 和 safari。

w = 200;

scrollTo(w - 1, 0);
window.setTimeout (function (){scrollTo(w, 0);}, 10);

【讨论】：