最近同事开发的页面遇到一个顽固的坑：
第一次访问某个页面，滚动一下，再刷新页面，发现滚动条停留在上次那个位置。

浏览器帮我们完成了这件事，本来初衷是好的，为了更好的用户体验嘛。然而有时候我们有一些特殊需求的页面，需要不记录而是每次进入都在文档顶部。这就苦了我们开发者了。记得以前通过js来重置。

比如进入页面后，js在onload事件中执行window.scrollTo(0,0)或document.body.scrollTop = 0；然而现在都统统无效（在桌面chrome ,iOS浏览器测试），可能是浏览器升级导致的。

尝试了各种办法，最终找到解决办法：

1
2
3
4
5
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}else{
    window.onunload= () => window.scrollTo(0,0);
}

解释：

  • history.scrollRestoration是新增的一个属性，值为auto|manual,默认为auto记录滚动条位置, 设为manual时就禁用记录位置的功能。兼容性不乐观（至少iOS 10.3.2版本的浏览器不行）；

  • 所以就用到了onunload事件(关键)，退出页面的时候滚动条位置重置为0，不得不说这个方法很巧妙666………