一個適用於單頁應用，返回原始滾動條位置的demo

時間 2019-11-24

標籤一個適用於單頁應用返回原始滾動條位置 demo 简体版

原文原文鏈接

如題，最近作一個項目時，因爲頁面太長，跳轉後在返回又回到初始位置，不利於用戶體驗，須要每次返回到用戶離開該頁面是的位置。因爲是移動端項目，使用了移動端的套ui框架framework7，自己框架的機制是支持返回原始位置的，可是因爲涉及到權限及安全等方面的問題，沒有采用framework7的路由機制，因此這個就必須本身寫了。javascript

個人想法是給每一個頁面一個data-page屬性用於保存這個頁面的名字，而後每次在頁面卸載即離開的時候獲取滾動條的位置，而後將頁面的名稱作爲屬性名保存起來，讓後將其push到一個數組中，保存到cookie中，到頁面再次加載時，將其獲取到，而後將頁面的滾動條位置調整到保存的位置，這樣就能夠實現了，固然其中有不少細節的東西，在這裏就不作贅述了，下面直接貼上代碼（歡迎大神點評）html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Title</title>
    <style>
        div {
            width:300px;
            height:300px;
            background:greenyellow;
            margin:200px auto;
            overflow-y: scroll;
        }
        #link{
            color: #fff;
            
        }
    </style>
</head>
<body>
<div id="box" data-page="index" class="pages">
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <a href="後退刷新測試1.html" id="link">點擊到第一個頁面</a>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
    <p>這是測試文字</p>
</div>
<script type="text/javascript" src="originBack.js"></script>
</body>
</html>

這裏我是模擬了framework7的頁面結構，沒有用來瀏覽器的滾動條，用一個div設置overflow：scroll來模擬頁面的滾動條。在須要應用的頁面直接引入js文件便可java

/**
 * Created by tianjin on 2017/7/18.
 */
var pages = document.getElementsByClassName('pages')[0];//獲取需滾動的頁面結構
var pageName = pages.getAttribute('data-page');//獲取頁面的data-page屬性，該屬性是頁面的名稱，經過該屬性判斷打開的是那個頁面，從而獲取其scrollTOp的值
/**
 * 初始化頁面，看cookie中是否保存有scrollTop屬性
 * 若是有，則不作任何處理
 * 若是沒有，則添加一個scrollTop屬性到cookie並賦值空數字
 * */
!function () {//自執行的頁面初始化方程
    var aCookie = document.cookie.split("; ");//獲取cookie並以‘;’爲標識將其轉化爲數組
    for (var i = 0;i < aCookie.length;i++) {//循環數組中的每一項
        var aCrumb = aCookie[i].split("=");//將每一項以等號爲分割標識轉化成數組
        if ('scrollTop' == aCrumb[0]) {//判斷數組的第一項，即cookie的屬性名是不是'scrollTop'，即判斷cookie中是否有scrollTop屬性
            return false//若是有，則不作任何處理，結束程序
        }
    }//若是判斷完成以後沒有scrollTop屬性
    var arr = [];//則初始化一個空數組
    var arrCookie = JSON.stringify(arr);//將該書組轉化成字符串格式，由於cookie中展現是以字符串形式的
    document.cookie ="scrollTop=" + arrCookie//將該字符串以屬性名爲scrollTop的存入cookie中
}();
/**
 * 定義設置cookie的方法SetCookie
 * 用來在每次頁面跳轉的時候重置cookie的scrollTop屬性
 * */
function SetCookie(sName,sValue) {//設置cookie，sName爲cookie的屬性值，即爲scrollTop，sValue爲cookie的scrollTop的值
    document.cookie = sName + "=" + sValue//設置cookie
}
/**
 * 定義獲取cookie的方法GetCookie
 * 用來在頁面加載是獲取cookie中的scrollTop的值並得到對應頁面離開時保存的scrollTop值
 * 而後將頁面的scrollTop設置成該值
 * */
function GetCookie(sName) {//獲取cookie，sName爲cookie的屬性值，即爲scrollTop，
    var aCookie = document.cookie.split("; ");//獲取cookie並以‘;’爲標識將其轉化爲數組
    for (var i = 0;i < aCookie.length;i++) {//循環數組中的每一項
        var aCrumb = aCookie[i].split("=");//將每一項以等號爲分割標識轉化成數組
        if (sName == aCrumb[0]) {//判斷數組的第一項，即cookie的屬性名是否等於傳入的屬性名scrollTop
            var scrollTopObj = JSON.parse(aCrumb[1]);//若是是，則將該cookie轉換成JSON格式
            return scrollTopObj//並將該JSON格式的數組返回
        }
    }
    return null//若是不是scrollTop，則返回一個空對象
}
/**
 * 定義頁面加載執行的函數，當頁面加載是執行該函數，並設置該頁面的scrollTop到離開該頁面是的位置
 * */
function fnLoad() {
    var k = null;//定義一個k變量
    var scrollTopArray = GetCookie('scrollTop');//執行GetCookie函數，並將其返回值保存在scrollTopArray中
    for (var i = 0; i<scrollTopArray.length ; i++){//循環scrollTopArray數組
        for (k in scrollTopArray[i]){//for in scrollTopArray中的沒一個對象
            if (k == pageName){//判斷對象的名稱是否等於當前頁面的data-page屬性，即獲取當前頁面scrollTop的值
                pages.scrollTop = scrollTopArray[i][k];//若是相等，則將當前頁面中的scrollTop設置成cookie中保存的scrollTop
                return false//並結束程序
            }
        }
    }
}
/**
 * 定義頁面卸載，即離開該頁面時的方法
 * 當離開頁面時，要將該頁面當前的scrollTop保存在cookie中
 * */
function fnUnload() {
    var flag = false;//定義一個開關，做爲當前cookie中是否保存該頁面的scrollTop值做爲判斷
    var scrollT = pages.scrollTop;//獲取當前頁面的scrollTop值
    var obj = {};//建立一個對象用於保存當前對象的scrollTop的值
    obj[pageName] = scrollT;//在上面對象的pageName屬性保存當前頁面的scrollTop的值
    var cookieObj = document.cookie.split("; ");//獲取cookie並以‘;’爲標識將其轉化爲數組
    for (var i = 0;i < cookieObj.length;i++) {//循環數組中的每一項
        var aCrumb = cookieObj[i].split("=");//將每一項以等號爲分割標識轉化成數組
        if (aCrumb[0] == 'scrollTop') {//判斷數組的第一項，即cookie的屬性名是否等於scrollTop
            var newArr = JSON.parse(aCrumb[1]);//若是相等，則將該屬性的值解析成JSON格式並保存在一個新數組newArr中
            if (newArr.length == 0){//判斷該數組是否爲空數組
                newArr.push(obj);//如過爲空，則將該頁面的scrollTop對象添加到數組中，並保存到cookie中
            }else {//若是不相等
                for (var j = 0 ;j<newArr.length ; j++){//若是不相等則循環該新數組
                    for ( t in newArr[j]){//for in 數組中的對象
                        if (t == pageName){//比較是否有屬性名和該頁面的pageName相等，若是有，則說明cookie中保存有該頁面的的scrollTop的值
                            newArr[j][t] = scrollT;//將原始的頁面的scrollTop的值替代成當前的scrollTop的值
                            flag = true//而後將開關的設置成true，關閉下方的將頁面的scrollTop對象從新添加到cookie中去
                        }
                    }
                }
                if (!flag){//如過flag爲false，則說明cookie中沒有該頁面的scrollTop屬性，則將該頁面的scrollTop屬性添加到cookie中
                    if (newArr.length>30){//因爲cookie的保存大小有限，限制保存30條
                        newArr.shift();//若是cookie中保存的數量大於30天，將該數組的第一條刪除
                        newArr.push(obj)//而後在添加該頁面的scrollTop對象到數組中
                    }else {
                        newArr.push(obj)//若是沒有到30條，則直接添加到數組中而後保存到cookie中
                    }
                }
            }
            var arrCookie = JSON.stringify(newArr);//將newArr轉化成字符串格式，由於cookie保存的是字符串格式
            SetCookie('scrollTop',arrCookie);//執行SetCookie方法，將數組保存到cookie中
        }
    }
}
window.onload = function () {
    fnLoad()//在頁面加載後執行fnLoad
};
window.onunload = function () {
    fnUnload()//在頁面卸載前執行fnLoad
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。