js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016-12-12 00:00
891 查看
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条;每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行。如下:
第一种方案
将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下:
js代码:
html中代码如下:
第二种方案
1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie
2.页面加载时再读取document.cookie的值,设置给div的scrollTop
js代码实现:
html:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
js实现表单提交后不重新刷新当前页面
基于iscroll.js实现下拉刷新和上拉加载效果
JSP防止网页刷新重复提交数据的几种方法
js仿手机页面文件下拉刷新效果
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
JavaScript实现刷新不重记的倒计时
JS在一定时间内跳转页面及各种刷新页面的实现方法
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
第一种方案
将上一个页面的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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
js实现页面刷新滚动条位置不变js实现表单提交后不重新刷新当前页面
基于iscroll.js实现下拉刷新和上拉加载效果
JSP防止网页刷新重复提交数据的几种方法
js仿手机页面文件下拉刷新效果
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
JavaScript实现刷新不重记的倒计时
JS在一定时间内跳转页面及各种刷新页面的实现方法
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
相关文章推荐
- js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
- js 实现刷新页面后回到记录时滚动条的位置
- js 实现刷新页面后回到记录时滚动条的位置
- 页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置
- js实现div滚动条在页面刷新 滚动条位置固定
- js实现页面刷新滚动条位置不变
- js控制刷新后回到页面原来位置
- 页面刷新/回传后页面保持滚动条位置 asp.net / JS
- [转]用一个JS代码实现页面刷新后保持页面滚动条的位置
- 用一个JS代码实现页面刷新后保持页面滚动条的位置
- JS实现对gridview中的checkbox的选中个数记录,并在页面刷新时保持checkbox的状态 .
- 记录几个脚本(弹出文件选择框、页面回滚时回到滚动条以前的位置)
- JQuery实现页面刷新滚动条自动滚动到特定位置
- 页面刷新后,页面重新棍回到原来的位置;如何在回发后返回客户端时仍然保持滚动条原来的位置
- 页面刷新后让其回到滚动条原来的位置
- 页面刷新后,滚动条自动回到刷新前的位置
- JS代码实现页面刷新后保持页面滚动条的位置
- .刷新/回传后页面保持滚动条位置 asp.net / JS
- JS刷新页面后滚动条的位置不变
- js实现html页面滚动条向下拉到一定的程度时,某个div就固定在顶部,向上拉时返回原位置。