一个适用于单页应用，返回原始滚动条位置的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的更多相关文章

从零搭建一个IdentityServer——单页应用身份验证
上一篇文章我们介绍了Asp.net core中身份验证的相关内容,并通过下图描述了身份验证及授权的流程: 注:改流程图进行过修改,第三方用户名密码登陆后并不是直接获得code/id_token/acc ...
vue + element-ui 制作tab切换（适用于单页切换不同标记显示不同内容）
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
3.【nuxt起步】-下面以一个SPA单页程序为例子
spa:single page applcation 1.components目录新建header.vue,footer.vue Header.vue Footer.vue Pages/index.v ...
做一个gulp+webpack+vue的单页应用开发架子
1.目标最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是目前最火的前端框架,vue.js ...
Nodejs in Visual Studio Code 12.构建单页应用Scrat实践
1.开始随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...
单页应用Scrat实践
单页应用Scrat实践 1.开始随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博 ...
一套Vue的单页模板：N3-admin
趁着周末偷来一点闲,总结近期的工作和学习,想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下. 首发于个人博客:blog.lxstart.net项目路径: ...
bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

随机推荐

笔记：MyBatis XML配置-typeHandlers 默认类型处理器
类型处理器 Java 类型 JDBC 类型 BooleanTypeHandler java.lang.Boolean, boolean 数据库兼容的 BOOLEAN ByteTypeHandler j ...
poj 3620
题意:给出一个矩阵,其中有些格子干燥.有些潮湿. 如果一个潮湿的格子的相邻的四个方向有格子也是潮湿的,那么它们就可以构成更大的湖泊,求最大的湖泊. 也就是求出最大的连在一块儿的潮湿的格子的数目. # ...
怎样把Linux的私钥文件id_rsa转换成putty的ppk格式
在Linux VPS下产生的私钥文件putty是不认识的,putty只认识自己的ppk格式,要在这两种格式之间转换,需要PuTTYgen这个程序. puttygen是putty的配套程序,putty的 ...
c++ --> 重载、重写（覆盖）和隐藏的区别
重载.重写(覆盖)和隐藏的区别一.重载重载从overload翻译过来,是指同一可访问区内被声明的几个具有不同参数列(参数的类型,个数,顺序不同)的同名函数,根据参数列表确定调用哪个函数,重载不关心 ...
最近用spring4.x整合Jackson------>java.lang.ClassNotFoundException:
最近用spring4.x整合Jackson,结果莫名其妙的一直报错,网上收索的结果都是在maven或者gradle的环境下配置依赖条件解决的:但是eclipseIDE环境下的jar包应该是会自动依赖影 ...
Linux下的硬链接与软链接
本文总结自: https://www.ibm.com/developerworks/cn/linux/l-cn-hardandsymb-links/index.html#fig2 一个文件可以用下图表 ...
css3控制div上下跳动-效果图
效果图演示,源代码
WHCTF-babyre
WHCTF-babyre 首先执行file命令得到如下信息 ELF 64-bit LSB executable, x86-64 尝试用IDA64打开,定位到关键函数main发现无法F5,尝试了修复无果 ...
java冒泡排序和快速排序
本ID技术干货公众号"java工会",欢迎关注指正. 一.冒泡排序 1.算法介绍设排序表长为n,从后向前或者从前向后两两比较相邻元素的值,如果两者的相对次序不对(A[i-1] & ...
C语言博客作业—一二维数组
一.PTA实验作业题目1:7-2 求整数序列中出现次数最多的数 1. 本题PTA提交列表 2. 设计思路 Begin 输入整数个数N 定义数组a[N] 输入数组a for(i 0 to N-1){/ ...

一个适用于单页应用，返回原始滚动条位置的demo

一个适用于单页应用，返回原始滚动条位置的demo的更多相关文章

随机推荐

热门专题