页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条;每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行。如下:
第一种方案
将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下:
js代码:
<script>var _h = 0;function SetH(o) {_h = o.scrollTopSetCookie("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>
转载于:https://www.cnblogs.com/edisoner/p/6006804.html
页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置相关推荐
- 浏览器 刷新页面后回到顶部_当你在浏览器中,忘记了曾经的登录密码怎么办......
当你在浏览器中,忘记了曾经的登录密码怎么办... 前言 你还在为使用浏览器的时候,忘记密码而烦恼吗?今天要分享的不为人知的小技巧,利用前端技术原理来帮助你找回原密码. 在我们使用各种网站登录时,总会勾 ...
- vue-router刷新页面后回到首页
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.[[点击跳转到网站.]] 今天给大家分享一个小知识点!注意查收! 平时我们再写vue项目配置完路由之后会发现他不会自动 ...
- 浏览器 刷新页面后回到顶部_JavaScript仿知乎回到顶部功能
一般的网站都有个回到顶部,回到顶部又有多种方法可以实现, 方法1: 在css中添加 html {scroll-behavior: smooth; } 然后在回到顶部按钮上加一个a标签,herf属性写顶 ...
- [vue-cli]vue-cli默认是单页面的,那要弄成多页面该怎么办呢
[vue-cli]vue-cli默认是单页面的,那要弄成多页面该怎么办呢 创建多个app? app =new Vue({}) app2 = new Vue({}) 个人简介 我是歌谣,欢迎和大家一起交 ...
- 使用vue 刷新页面后state数据被清空的问题(刷新总是跳转到登陆页面)
在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex ...
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法 参考文章: (1)解决element-ui中el-m ...
- JS实现用键盘上下左右键移动页面的div进行移动,并且不能移出页面
<style>#box {width: 200px;height: 200px;background-color: red;position: fixed;} </style> ...
- js实现刷新页面的方法
js 刷新当前页面的方法: reload() 方法; replace() 方法; 页面自动刷新; window.history.go(0) document.execCommand(''Refres ...
- java中刷新js函数,js常用刷新页面方法汇总
如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选 ...
最新文章
- HDU 4832(DP+计数问题)
- 修改linux swap空间的swappiness,降低对硬盘的缓存
- Bootstrap3系列:下拉菜单
- linux windows 域,linux加入windows域之完美解决方案
- 《刻意练习》到底讲了些什么???
- 扫地机器人开机充电还是关机充电器_适用于智能扫地机器人的充电方法与流程...
- JUC:ConcurrentHashMap(并发容器)
- Linux strace命令 一
- python3入门与进阶 网盘_python3入门与进阶(二)
- 计算机网络网络层之层次路由
- 二、套接字类型与协议设置
- 【转】Eclipse,MyEclipse快捷键及字体设置
- mp3排序软件哪个好用_电脑上有什么录音软件,哪个电脑录音软件好用
- html网页怎么弄背景 图片,在html网页中如何设置背景图片?网页背景怎么设置?...
- KPPW系统—开源免费的威客建站系统
- 国人“急功近利”的理由和无奈
- ​六号美术馆 基于以太坊区块链上的区块链游戏
- (错误)SyntaxError: invalid syntax
- [linux小水滴]工具安装与使用
- 第九章 python 字典(Dict)