首页 > 代码库 > 一个适用于单页应用，返回原始滚动条位置的demo
一个适用于单页应用，返回原始滚动条位置的demo
如题，最近做一个项目时，由于页面太长，跳转后在返回又回到初始位置，不利于用户体验，需要每次返回到用户离开该页面是的位置。由于是移动端项目，使用了移动端的套ui框架framework7，本身框架的机制是支持返回原始位置的，但是由于涉及到权限及安全等方面的问题，没有采用framework7的路由机制，所以这个就必须自己写了。
我的想法是给每个页面一个data-page属性用于保存这个页面的名字，然后每次在页面卸载即离开的时候获取滚动条的位置，然后将页面的名称做为属性名保存起来，让后将其push到一个数组中，保存到cookie中，到页面再次加载时，将其获取到，然后将页面的滚动条位置调整到保存的位置，这样就可以实现了，当然其中有很多细节的东西，在这里就不做赘述了，下面直接贴上代码（欢迎大神点评）
<!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文件即可
/** * 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 };
一个适用于单页应用，返回原始滚动条位置的demo
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。