JS返回頁面時自動回滾到歷史瀏覽位置

在個人系統實際開發過程當中遇到一個需求，我須要讓應用在各個頁面間跳轉時回到每頁原先瀏覽到的位置，方便用戶使用。

在網上查資料時，看到的方案有很多，衆說紛紜，但真正給出可行可用代碼的寥寥無幾，因此我乾脆按本身的想法用SessionStorage寫了一個緩存頁面的方法，在離開頁面時將須要緩存的容器中全部內容都存到SessionStorage中，在返回頁面時從新加載，方便用戶操做，效果以下：

前端精品教程：百度網盤下載

頁面緩存

前端精品教程：百度網盤下載

使用方法

用法也很簡單，咱一步一步講。

首先，在你須要緩存標籤容器的類名中加入cache，並寫一個name做爲該容器的惟一標記，示例以下：

?

1 2 3

<div class= "weui-tab cache" name= "index" >   .... </div>

其次，聲明全局變量，獲取緩存內容和容器，示例以下：

?

1 2	var cache; var cacheId = $( ".cache" ).attr( "name" );

隨後，在頁面加載時調用緩存，在離開頁面時生成緩存，代碼以下：

前端精品教程：百度網盤下載

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

window.onload = function () {   //載入緩存的列表   loadCache(cacheId); }   window.onunload = function () {   //能夠經過needCache這個flag來控制是否須要緩存   if (localStorage.needCache == 'true' ) {    //離開頁面時生成緩存    createCache(cacheId);   } }   /* *   * @brief 可對指定多個控件進行內容和位置的緩存   * @param cacheId 緩存元素的id   * @return null   * */ function createCache(cacheId) {   //對內容進行緩存   var list = [];   var listController = $( '.cache' );   $.each(listController, function (index, value, array) {    list.push(value.innerHTML);   })   //對瀏覽到的位置進行緩存   var top = [];   var topController = $( ".cache" ).find( ".top" );   $.each(topController, function (index, value, array) {    top.push(value.scrollTop);   })   //存入sessionstorage中   sessionStorage.setItem(cacheId, JSON.stringify({    list: list,    top: top   })); }   /* *   * @breif 可對指定多個控件加載緩存   * @param 加載緩存的id   * @return null   * */ function loadCache(cacheId) {   //必定要放在整個js文件最前面   cache = sessionStorage.getItem(cacheId);   if (cache) {    cache = JSON.parse(cache);    //還原內容    var listController = $( '.cache' );    $.each(listController, function (index, value, array) {     value.innerHTML = cache.list[index];    })    //還原位置    var topController = $( ".cache" ).find( ".top" );    $.each(topController, function (index, value, array) {     value.scrollTop = cache.top[index];    })   } }

大部分均可以直接copy，再根據你的須要改進一下，就能夠很好的使用了。