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 继承机制实例
Aug 12 Javascript
JS 判断undefined的实现代码
Nov 26 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
Javascript中的async awai的用法
May 17 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
es6数据变更同步到视图层的方法
Mar 04 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
解决File size limit exceeded 错误的方法
2013/06/14 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
javascript每日必学之继承
2016/02/23 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Django框架用户注销功能实现方法分析
2019/05/28 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
Python callable内置函数原理解析
2020/03/05 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
python中元组的用法整理
2020/06/15 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
phpquery中文手册
2021/03/18 PHP
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
学生处主任岗位职责
2013/12/01 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers