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

局部刷新后,要求滚动条在原下拉时的位置:

1、将页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下
<div id="x" style="height: 200px; overflow: scroll" onscroll="SetH(this)">
</div>

<script>
  var _h = 0;
  function SetH(o) {
   _h = o.scrollTop
   SetCookie("a", _h)
  }
  function SetCookie(sName, sValue) {
   document.cookie = sName + "=" + escape(sValue) + "; ";
  }


 window.onload = function () {
   document.getElementById("x").scrollTop = GetCookie("a");//页面加载时设置scrolltop高度
  }

  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>

注意:
 document.getElementById("x").scrollTop = GetCookie("a");

要在ajax返回成功后执行
$.ajax({url:"",
        type:"Post",
        data:Data,
        success:function(data){
            document.getElementById("ty0").scrollTop = GetCookie("a");//页面加载时设置scrolltop高度
                }
            });

2、“

<div class="content" data-role="tab-content" data-id="course-a" runat="server" id="divContent" style="height: 365px; overflow-y: scroll" onscroll= "KeepScrollBar()">
</div>



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

猜你喜欢

转载自blog.csdn.net/FORLOVEHUAN/article/details/80453204