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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 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
第九节 绑定 [9]
2006/10/09 PHP
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PHP加密解密类实例代码
2016/07/20 PHP
工作需要写的一个js拖拽组件
2011/07/28 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
详解Python中的文件操作
2016/08/28 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python装饰器语法糖
2019/01/02 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python文字转语音的实例代码分析
2019/11/12 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
夜大毕业自我鉴定
2013/10/11 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android