首页 > 其他分享 >js实现刷新页面后回到记录时滚动条的位置

js实现刷新页面后回到记录时滚动条的位置

时间:2024-08-28 11:06:05浏览次数:8  
标签:js 滚动条 window cookie scrollTop document scrollPos 页面

第二种方案 1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie 2.页面加载时再读取document.cookie的值,设置给div的scrollTop

<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>

  

<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,滚动条,window,cookie,scrollTop,document,scrollPos,页面
From: https://www.cnblogs.com/feixiablog/p/18384184

相关文章

  • js练习--用户管理API
    需要node.js运行环境,创建2个文件:user.js,server.jsuser.js:letusers={};module.exports=users;server.js:consthttp=require('http');//导入user模块letusers=require('./user');//创建HTTP服务器constserver=http.createServer((req,res)=......
  • three.js低代码 编辑器 ,和 相应 3d 功能案例 ,cesium
    开发历程低代码的开发是非常曲折的,尤其是早期根本没有任何参考作品或者相关的一些知识博客去引领我们去做,会经历多次的推到再到重头再来,又需要开发者有很高的知识储备,举步维艰。以下是我的一些的功能分布,希望能对你有一些启发,让你少走一些弯路。预览查看https://z25863......
  • js 正则列表
    匹配空的if代码块,匹配空的else把下面的if换成else就行了 /if(\s)*\(.*\)(\s)*\{[\s\n]*\}$/ 匹配手机号/^1[3-9]\d{9}$/ 经度(保留六位小数)/^[\-\+]?(0(\.\d{1,6})?|([1-9](\d)?)(\.\d{1,6})?|1[0-7]\d{1}(\.\d{1,6})?|180)$/ 纬度(保留六位小数)/^[\-\+]?......
  • Flask-RESTFul 之 RESTFul 的响应处理 之定制返回的 json格式
    Flask-RESTFul之RESTFul的响应处理之定制返回的json格式使用`marshal_with`和`fields`定制响应结构重写Flask的`jsonify`方法在返回前手动构造JSON使用Flask-RESTful的`Response`类自定义输出处理器结论在Flask-RESTful中,如果你......
  • 基于Node.js+vue社区医疗服务系统(程序+论文+开题报告)-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着社会老龄化的加剧和居民健康意识的提升,社区医疗服务作为连接居民与医疗资源的重要桥梁,其重要性与日俱增。然而,当前许多社区医疗服务存在资源分配不均、......
  • 基于Node.js+vue网课视频课设(程序+论文+开题报告)-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,特别是在全球疫情的影响下,线上教育成为了教育领域不可或缺的一部分,网课视频课程以其灵活便捷、资源丰富等优势迅速崛起。然而,当前......
  • 基于Node.js+vue社区常驻居民信息管理软件(程序+论文+开题报告)-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着城市化进程的加速,社区作为城市的基本单元,其管理效率与居民生活质量息息相关。然而,传统社区管理方式往往依赖于纸质档案和人工操作,存在信息更新不及时、......
  • 基于Node.js+vue外卖鲜花系统(程序+论文+开题报告)-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网的飞速发展和人们生活节奏的加快,线上消费已成为现代生活不可或缺的一部分,尤其是在追求即时满足与个性化体验的今天,传统鲜花行业正经历着深刻的变......
  • 基于Node.js+vue商城积分兑换系统(程序+论文+开题报告)-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在电子商务蓬勃发展的今天,商城积分兑换系统作为增强用户粘性、促进用户复购的重要手段,越来越受到各大电商平台的重视。随着消费者购物行为的日益成熟和多样......
  • 基于Node.js+vue球场预定管理(程序+论文+开题报告)-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着体育运动的普及和全民健身意识的增强,各类球场资源的需求日益增长。然而,传统的人工管理方式在球场预定上显得力不从心,常出现信息不对称、预约流程繁琐、......