前言通常我们在浏览网页的时候,当我们浏览到某个位置跳转到其他页面,然后又回到开头的页面时,浏览器会帮我们重定位到离开页面时的位置。对于大多数场景来说,这确实是一个非常好的体验设计!但有时我们不想这样做。这个时候,我们一般是使用scrollTop来解决这个问题吗?今天我们就来介绍一个比较优雅的方法scrollRestoration。我们通常在网页中使用history:history.forward()、history.back()或history.go(1)等操作,但是history还有一个神奇的属性——“scrollRestoration滚动恢复”。scrollRestorationHistory的接口-“滚动恢复属性”允许Web应用程序在历史导航上显式设置默认滚动恢复行为语法constscrollRestore=history.scrollRestore值auto:将恢复用户滚动到的页面位置。(default)manual:不恢复页面上的位置。用户必须手动滚动到该位置。虽然文档没有明确说明默认值是谁,但是从我们平时的经验来看,默认值应该是auto。当然我们也可以自己验证,找一个自己的页面在浏览器打开,然后在控制台输入history。这里我们可以看到history.scrollRestoration的默认值是auto。那么也就是说,如果浏览器支持history.scrollRestoration并且值为auto,则会使用默认的滚动恢复行为。如果设置为手动,可以取消滚动恢复行为window.history.scrollRestoration&&(window.history.scrollRestoration='auto')这个方法比我们常用的scrollTop优雅多了。兼容性
