js实现刷新页面后回到记录时滚动条的位置【两种方案可选】


Posted in Javascript onDecember 12, 2016

当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条;每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行。如下:

第一种方案

将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下:

js代码:

<script>
  var _h = 0;
  function SetH(o) {
   _h = o.scrollTop
   SetCookie("a", _h)
  }
  window.onload = function () {
   document.getElementById("x").scrollTop = GetCookie("a");//页面加载时设置scrolltop高度
  }
  function SetCookie(sName, sValue) {
   document.cookie = sName + "=" + escape(sValue) + "; ";
  }
  function GetCookie(sName) {
   var aCookie = document.cookie.split("; ");
   for (var i = 0; i < aCookie.length; i++) {
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0])
     return unescape(aCrumb[1]);
   }
   return 0;
  }
 </script>

html中代码如下:

<div id="x" style="height: 200px; overflow: scroll" onscroll="SetH(this)">
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
   <p>1</p>
</div>

第二种方案

1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie

2.页面加载时再读取document.cookie的值,设置给div的scrollTop

js代码实现:

<script type="text/javascript">
  function KeepScrollBar() {
   var scrollPos;
   if (typeof window.pageYOffset != 'undefined') {
    scrollPos = window.pageYOffset;
   }
   else if (typeof document.body != 'undefined') {
    scrollPos = document.getElementById('divContent').scrollTop;
   }
   document.cookie = "scrollTop=" + scrollPos; 
  }
  window.onload = function (){
   if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
    var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); 
    document.getElementById('divContent').scrollTop = parseInt(arr[1]); 
   }
  }
</script>

html:

<div class="content" data-role="tab-content" data-id="course-a" runat="server" id="divContent" style="height: 365px; overflow-y: scroll" onscroll= "KeepScrollBar()">
    <p>   1</p>   
    <p>   2</p>   
    <p>   3</p>   
    <p>   4</p>   
    <p>   5</p>   
    <p>   6</p>   
    <p>   7</p>   
    <p>   8</p>   
    <p>   9</p>   
    <p>   10</p>   
    <p>   11</p>   
    <p>   12</p>   
    <p>   13</p>   
    <p>   14</p>   
    <p>   15</p>   
    <p>   16</p> 
</div>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
深入探寻javascript定时器
Jan 02 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 #Javascript
多种方式实现js图片预览
Dec 12 #Javascript
JavaScript实现多栏目切换效果
Dec 12 #Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 #Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 #Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 #Javascript
AngularJS封装指令方法详解
Dec 12 #Javascript
You might like
论建造顺序的重要性
2020/03/04 星际争霸
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
PHP 加密解密内部算法
2010/04/22 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
Python常见异常分类与处理方法
2017/06/04 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python向图片里添加文字
2019/11/26 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
员工工作表现评语
2014/04/26 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
建房合同协议书
2016/03/21 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
PHP遍历数组的6种方式总结
2021/11/17 PHP
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技