刷新页面后禁用浏览器自动滚动？

Question

有没有办法禁用一些现代浏览器（如 Chrome 和 Safari）在页面刷新时记住你的滚动位置的行为？

- Anthony

---

为什么你想要这样做呢？回到那个位置是良好的用户体验。 - putvande

@putvande 在大多数情况下完全同意，但是当有一个大型数据表格添加新数据到顶部时，虽然我们可以动态更新数据，但如果用户出于任何原因刷新页面，我们不希望将他们带回旧的滚动位置。这不符合他们的期望体验--此外，这只是一个用例，还有其他存在的用例。 - Anthony

使用无限滚动加载体验的任何页面都会出现这个（意外的）问题。 - arxpoetica

Answer 1

对于支持history.scrollRestoration的浏览器，可以关闭自动滚动行为：

原始回答：{{Original Answer}}

if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}

最初的回答

源码：https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

- Cory Duncan

---

由于这仍然是一个实验性质的属性，有人知道浏览器支持情况吗？ - Neil Monroe

太棒了，正是我需要的。在我的情况下，我正在处理一个Angular SPA应用程序，并且正在努力保留滚动位置。浏览器会在路由器有机会导航之前恢复先前组件的滚动位置，导致跳跃式滚动。哦，这些讨厌的浏览器... - cs95

它被大多数浏览器支持。https://developer.mozilla.org/zh-CN/docs/Web/API/History/scrollRestoration - Nathalia Xavier

Answer 2

您尝试过在文档准备就绪后执行此操作吗？

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

如果那不起作用...

$(document).ready(function(){
    setTimeout(function(){
        window.scrollTo(0, 0);
    }, 1);
});

这将把它推到调用栈的底部。

- Robert

Answer 3

不仅适用于Chrome，我认为这对所有浏览器都很有效。

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

在您更新问题后：

我认为最好使用一些cookies或会话存储。

- HIRA THAKUR

---

我也有同样的想法 - 但我在尝试这种回调时没有成功 - 看起来Chrome会在onload触发后自动滚动页面。 - Anthony

Answer 4

与其希望setTimout最终出现在堆栈底部，我宁愿强制确保我们达到所需的滚动位置。尽管我仍认为这是一种hack方法，但我希望能够绑定到某种浏览器事件。

var scrollToYPos = 100;
var interval = setInterval(checkPos, 0);

function checkPos() {
    if ($(window).scrollTop() == scrollToYPos) {
        clearInterval(interval);
    } else {
        window.scrollTo( 0, scrollToYPos );
        checkPos();               
    }
}      

- Anthony

Answer 5

我也遇到了同样的问题。这是我想出来的基本解决方案：

      // scroll the user to the comments section if we need to
      wt = win.scrollTop();
      wb = wt + win.height();
      // if scroll position is 0, do this (it's a fresh user), otherwise
      // the browser is likely to resume the user's scroll position, in 
      // which case we don't want to do this
      yab.loaded().done(function() {
        // it seems that browsers (consistently) set the scroll position after
        // page load.  Accordingly wait a 1/4 second (I haven't tested this to the lowest
        // possible timeout) before triggering our logic
        setTimeout(function() {
          // if the window top is 0, scroll the user, otherwise the browser restored
          // the users scroll position (I realize this fails if the users scroll position was 0)
          if(wt === 0) {
            p = self.container.offset().top;
            if(wb != p) {
              win.scrollTop(p - th - 20);         
            }
          }              
        }, 250);
      });

- Skone

---

哦，yab.loaded是一个承诺，在窗口加载完成后解决。相当于$（window）.load（function（）{ // ... }）;。 - Skone

Answer 6

我认为最简单的方法是欺骗浏览器重新加载页面，并让它认为这是一个新页面。

window.location = window.location

在我测试过的所有浏览器中，它都能够一致地工作。个人建议避免使用onload回调函数，因为它们可能会在加载期间导致不太美观的跳跃。

- Keith Sunshine Perfetti