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 相关文章推荐
Maps Javascript
Jan 22 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
vue实现修改图片后实时更新
2019/11/14 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
python实现socket端口重定向示例
2014/02/10 Python
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
10款最好的Python开发编辑器
2019/07/03 Python
python 6种方法实现单例模式
2020/12/15 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
Ruby如何实现动态方法调用
2012/11/18 面试题
机电一体化自荐信
2013/12/10 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
办公室岗位职责
2015/02/04 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书