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 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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
怎么使 Mysql 数据同步
2006/10/09 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
jquery 问答知识整理
2010/02/11 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
python根据路径导入模块的方法
2014/09/30 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
python线程join方法原理解析
2020/02/11 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
为什么要使用servlet
2016/01/17 面试题
中学门卫岗位职责
2013/12/26 职场文书
幼儿园运动会口号
2014/06/07 职场文书
离婚协议书标准格式
2014/10/04 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python