js取消浏览器对页面滚动条位置的记录

问题描述：

项目提出bug，当正在浏览页面的时候点击返回首页此时页面停留在页面顶部，然后立即刷新，页面会回到刚才浏览的部分。
期望：当浏览时刷新可以保存滑动条的位置但是当点击首页的时候不需要保存

问题出现原因：

浏览器在导航跳转和通过 History API 创建历史记录时，都会记录当前的垂直滚动距离，在重新访问时恢复这个距离。

问题解决办法：

1、初级版

$(".toIndex").click(function(){
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
    }
});//去除默认的滚动恢复行为
var recoverAuto = function () {
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'auto';
    }
};
setTimeout(recoverAuto,1800);//回复默认的滚动恢复行为

给返回首页添加点击事件，关闭记录当前的垂直滚动距离浏览器行为。但是这样会导致之后也无法保存滚动条的位置，所以后面加了一个定时器，在1.8s之后恢复浏览器的记录行为。
缺点：如果用户在1.8s之内浏览页面并刷新，不会回到浏览位置。

2、 终极方案（从根本上解决问题，无bug）

$(".toIndex").click(function(){
    $('body,html').scrollTop(0);
});//返回首页的同时将滑动条置顶

给返回首页添加点击事件，返回首页的同时将滑动条置顶，让浏览器记录一个在顶部的历史记录。

---

相关知识

平常使用浏览器的后退功能时，常常会发现返回的页面滚动到了之前的位置，而不是简单的回到顶部。这是由于浏览器在导航跳转和通过 History API 创建历史记录时，都会记录当前的垂直滚动距离，在重新访问时恢复这个距离。值得一提的是，在 HTML History Spec中并没有强制要求浏览器记录与恢复滚动距离。

引入新的 API
为了让开发者能够通过编程方式关闭这一浏览器行为，《浏览器恢复滚动提案》引入了新的 API：

if ('scrollRestoration' in history) {
    // 默认值为'auto'
    history.scrollRestoration = 'manual';
}

---

更为清爽的浏览体验,请移步我的个人博客
天心天地生的个人博客