JS返回頁(yè)面時(shí)自動(dòng)回滾到歷史瀏覽位置
在我的系統(tǒng)實(shí)際開(kāi)發(fā)過(guò)程中遇到一個(gè)需求,我需要讓?xiě)?yīng)用在各個(gè)頁(yè)面間跳轉(zhuǎn)時(shí)回到每頁(yè)原先瀏覽到的位置,方便用戶使用。
在網(wǎng)上查資料時(shí),看到的方案有不少,眾說(shuō)紛紜,但真正給出可行可用代碼的寥寥無(wú)幾,所以我干脆按自己的想法用SessionStorage寫(xiě)了一個(gè)緩存頁(yè)面的方法,在離開(kāi)頁(yè)面時(shí)將需要緩存的容器中所有內(nèi)容都存到SessionStorage中,在返回頁(yè)面時(shí)重新加載,方便用戶操作,效果如下:

頁(yè)面緩存
使用方法
用法也很簡(jiǎn)單,咱一步一步講。
首先,在你需要緩存標(biāo)簽容器的類名中加入cache,并寫(xiě)一個(gè)name作為該容器的唯一標(biāo)記,示例如下:
<div class="weui-tab cache" name="index"> .... </div>
其次,聲明全局變量,獲取緩存內(nèi)容和容器,示例如下:
var cache;
var cacheId = $(".cache").attr("name");
隨后,在頁(yè)面加載時(shí)調(diào)用緩存,在離開(kāi)頁(yè)面時(shí)生成緩存,代碼如下:
window.onload = function () {
//載入緩存的列表
loadCache(cacheId);
}
window.onunload = function () {
//可以通過(guò)needCache這個(gè)flag來(lái)控制是否需要緩存
if (localStorage.needCache == 'true') {
//離開(kāi)頁(yè)面時(shí)生成緩存
createCache(cacheId);
}
}
/* *
* @brief 可對(duì)指定多個(gè)控件進(jìn)行內(nèi)容和位置的緩存
* @param cacheId 緩存元素的id
* @return null
* */
function createCache(cacheId) {
//對(duì)內(nèi)容進(jìn)行緩存
var list = [];
var listController = $('.cache');
$.each(listController, function (index, value, array) {
list.push(value.innerHTML);
})
//對(duì)瀏覽到的位置進(jìn)行緩存
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 可對(duì)指定多個(gè)控件加載緩存
* @param 加載緩存的id
* @return null
* */
function loadCache(cacheId) {
//一定要放在整個(gè)js文件最前面
cache = sessionStorage.getItem(cacheId);
if (cache) {
cache = JSON.parse(cache);
//還原內(nèi)容
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,再根據(jù)你的需要改進(jìn)一下,就可以很好的使用了。
github傳送地址: https://github.com/JunJieDing666/YouZhiGou
總結(jié)
以上所述是小編給大家介紹的JS返回頁(yè)面時(shí)自動(dòng)回滾到歷史瀏覽位置,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Javascript iframe交互并兼容各種瀏覽器的解決方法
這篇文章主要介紹了Javascript iframe交互并兼容各種瀏覽器的解決方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
js實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01
openlayers4實(shí)現(xiàn)點(diǎn)動(dòng)態(tài)擴(kuò)散
這篇文章主要為大家詳細(xì)介紹了openlayers4實(shí)現(xiàn)的點(diǎn)動(dòng)態(tài)擴(kuò)散,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08
js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
微信公眾號(hào)-獲取用戶信息(網(wǎng)頁(yè)授權(quán)獲?。?shí)現(xiàn)步驟
這篇文章主要介紹了微信公眾號(hào)-獲取用戶信息(網(wǎng)頁(yè)授權(quán)獲?。?shí)現(xiàn)步驟的相關(guān)資料,需要的朋友可以參考下2016-10-10
JavaScript函數(shù)的一些注意要點(diǎn)小結(jié)及js匿名函數(shù)
本文給大家總結(jié)了javascript函數(shù)的一些注意要點(diǎn)及js匿名函數(shù),主要知識(shí)點(diǎn)有:函數(shù)的基本語(yǔ)法、函數(shù)的參數(shù)、函數(shù)的重載相關(guān)知識(shí),對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-11-11
基于JavaScript中標(biāo)識(shí)符的命名規(guī)則介紹
下面小編就為大家分享一篇基于JavaScript中標(biāo)識(shí)符的命名規(guī)則介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
深入理解JavaScript系列(26):設(shè)計(jì)模式之構(gòu)造函數(shù)模式詳解
這篇文章主要介紹了深入理解JavaScript系列(26):設(shè)計(jì)模式之構(gòu)造函數(shù)模式詳解,本文講解了基本用法、構(gòu)造函數(shù)與原型、只能用new嗎?、強(qiáng)制使用new、原始包裝函數(shù)等內(nèi)容,需要的朋友可以參考下2015-03-03
前端JavaScript實(shí)現(xiàn)文件壓縮的全面優(yōu)化指南
JavaScript文件大小直接影響網(wǎng)頁(yè)加載速度和用戶體驗(yàn),本文將詳細(xì)介紹從基礎(chǔ)到高級(jí)的各種JavaScript壓縮優(yōu)化技術(shù),小伙伴可以根據(jù)需求進(jìn)行選擇2025-04-04
js父窗口關(guān)閉時(shí)子窗口隨之關(guān)閉完美解決方案
admin注銷的時(shí)候,或者main.html關(guān)閉的時(shí)候,如何讓打開(kāi)的所有新窗口一起關(guān)閉,下面有個(gè)不錯(cuò)的解決方案,大家可以參考下2014-04-04

