当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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
标签:
js,刷新,滚动条
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“js实现刷新页面后回到记录时滚动条的位置【两种方案可选】”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
2024年11月16日
2024年11月16日
- 群星《2024好听新歌36》AI调整音效【WAV分轨】
- 梁朝伟.1986-朦胧夜雨裡(华星40经典)【华星】【WAV+CUE】
- 方芳.1996-得意洋洋【中唱】【WAV+CUE】
- 辛欣.2001-放120个心【上海音像】【WAV+CUE】
- 柏菲·万山红《花开原野1》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 柏菲·万山红《花开原野2》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 潘安邦《思念精选集全纪录》5CD[WAV+CUE]
- 杨千嬅《千嬅新唱金牌金曲》金牌娱乐 [WAV+CUE][985M]
- 杨钰莹《依然情深》首版[WAV+CUE][1G]
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】