js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

更新时间：2016年12月12日 11:02:46 作者：edisoner

本文主要介绍了页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置的两种方案，需要的朋友可以看下

当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 窗口加载蒙板内嵌网页内容
用于在现有窗口上加载蒙板，在蒙板内在嵌入其他页面内容
2010-11-11
如何在selenium中使用js实现定位
这篇文章主要介绍了如何在selenium中使用js实现定位,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
ES6数组复制和填充方法copyWithin()、fill()的具体使用
本文主要介绍了ES6数组复制和填充方法copyWithin()、fill()的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多，并且空前有限的时候，使用滚动是一个不错的选择，本章节就通过代码实例介绍一下如何实现此效果，对无缝向上滚动实例代码感兴趣的朋友一起学习吧
2016-01-01
JS数组扁平化(flat)方法总结详解
这篇文章主要介绍了JS数组扁平化(flat)方法总结详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
2019-06-06
JavaScript实现彩虹文字效果的方法
这篇文章主要介绍了JavaScript实现彩虹文字效果的方法,涉及javascript操作文字样式的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
JS数组方法push()、pop()用法实例分析
这篇文章主要介绍了JS数组方法push()、pop()用法,结合实例形式分析了JavaScript数组push()与pop()方法基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下
2020-01-01
IE JS无提示关闭窗口不提示的方法
好多情况下，用户想关闭页面不需要提示，提高用户体验，下面的代码经脚本之家测试通过。
2010-04-04
在表单提交前进行验证的几种方式整理
为了减轻后台压力，可以利用JavaScript在表单提交前对表单数据进行验证，本文整理了常用的几种方式，有需求的朋友可以参考下
2013-07-07
js实现简单计算器
一个简洁的网页JS计算器，附详细代码释义。通过下边的效果演示就可以看到，这是一个挺小的js网页计算器，界面美化的我想还是不错的，毕竟在没有使用任何图片修饰的情况下，很好看，而且功能挺实用，可以完成基本的数学算数运算。
2015-11-11