如何优雅地取消页面滚动恢复行为？

前言

通常我们在浏览web页面时，当浏览到某个位置跳去了其它页面浏览后再回到开始时的那个页面时，浏览器会帮我们重新定位到我们离开页面时的位置，对于绝大多数场景来说，这确实是一个非常好的体验设计!但有时候我们往往不想这样，这个时候我们是不是通常会使用scrollTop来解决这一问题，今天我们再来介绍一种更佳优雅的方法scrollRestoration。

成都创新互联长期为上千多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为宁强企业提供专业的网站制作、成都网站设计，宁强网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

history

我们平常在web页面中会用到：history.forward()、history.back()或history.go(1)之类的操作，但history还有另外一个神奇的属性 —— 「scrollRestoration 滚动恢复」。

scrollRestoration

History 的接口—— 「滚动恢复属性」 允许 web 应用程序在历史导航上显式地设置默认滚动恢复行为

语法

const scrollRestore = history.scrollRestoration

值

• auto：将恢复用户已滚动到的页面上的位置。(默认值)
• manual：未还原页上的位置。用户必须手动滚动到该位置。

文档上虽然并没有明确说明谁是默认值，但从我们的平常使用体验上来将，这个默认值应该就是auto。当然我们也可以自行验证，找一个自己的页面在浏览器打开，然后在控制台输入history。

这里我们就能看到history.scrollRestoration的默认值就是auto。

所以也就是说如果浏览器支持history.scrollRestoration并且值为auto则会默认的滚动恢复行为，如果设置为manual则可以取消滚动恢复行为

window.history.scrollRestoration && (window.history.scrollRestoration 
= 'auto')

这种方式相对于我们常用的scrollTop要更加的优雅。

兼容性

分享名称：如何优雅地取消页面滚动恢复行为？
文章网址：http://www.shufengxianlan.com/qtweb/news27/286927.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联