前言

通常我們在瀏覽web頁面時，當瀏覽到某個位置跳去了其它頁面瀏覽后再回到開始時的那個頁面時，瀏覽器會幫我們重新定位到我們離開頁面時的位置，對于絕大多數場景來說，這確實是一個非常好的體驗設計!但有時候我們往往不想這樣，這個時候我們是不是通常會使用scrollTop來解決這一問題，今天我們再來介紹一種更佳優雅的方法scrollRestoration。

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要更加的優雅。

兼容性