页面刷新 滚动条如何实现不恢复到之前位置

一、需求场景

在日常使用中，无论是浏览网页、看小说还是追剧，会发现无论是哪个浏览器，都有这样一个体验细节。

那就是，如果浏览器不是强制刷新（Ctrl + F5），而是普通刷新（点击刷新按钮，或者按下 F5 刷新），则页面重新载入完毕后大概率会调到之前访问的位置。

大多数时候，这种体验对用户是友好的。

但是，实际开发中，我们总会存在不希望用户刷新记住之前滚动位置的情况。

这个时候该怎么办呢？

曾几何时，我是在页面 load 完毕之后，在足够安全的时间之后设置页面的 scrollTop 为 0。

这个方法当然可以实现功能了，但是，然而，bug，这个方法实在是太不优雅了！而且逼格明显不够啊！

那么应该如何优雅的实现这个功能呢？经过一番艰苦的寻找，猛然发现，原来浏览器已经提供了原生的 API，可以轻松实现浏览器滚动后每次都回到顶部的能力。接下来请出外面的主角：

二、 history.scrollRestoration

当某个页面想实现这个功能时 ，只需要在代码中添加几行代码：

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

这就搞定了？ 是的 只需这几行代码 就搞定了！ 是不是又有逼格又精简又优雅！

功能实现了，下面我们来详细看下这个方法的相关内容。

三、 语法和兼容性

history.scrollRestoration 支持下面两个属性值：

• auto

  默认值，表示滚动位置会被存储。

• manual

  单词的意思就是手动。表示，滚动的位置不会被存储。

兼容性

兼容性很不错，现代浏览器很早就支持了，移动端放心使用。

至于IE浏览器...就放弃吧 IE浏览器不支持如此优雅的属性