保持滚动条位置

最新推荐文章于 2022-11-02 11:30:58 发布

xiaoding133

最新推荐文章于 2022-11-02 11:30:58 发布

阅读量1.1k

点赞数

分类专栏： Js/Jquery 文章标签： javascript scroll function 浏览器 input 服务器

本文链接：https://blog.csdn.net/xiaoding133/article/details/6686953

版权

Js/Jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

为了做到这个功能，我们需要做两件事情，第一，滚动条发生改变的时候记录滚动条位置。把它保存在hidden <input> field 第二，当网页回发时，hidden <input> field 的值会发送到服务器端，服务器告诉客户端重新设置滚动条位置。首先来看看javascript是怎么记录滚动条位置的。

<script language = "javascript">
<!--
   function sstchur_SmartScroller_GetCoords()  //记录滚动条位置
   {
      var scrollX, scrollY; 保存滚动条的水平位置和垂直 位置
      
      if (document.all)   //IE浏览器
      {
         if (!document.documentElement.scrollLeft)
            scrollX = document.body.scrollLeft;
         else
            scrollX = document.documentElement.scrollLeft;
               
         if (!document.documentElement.scrollTop)
            scrollY = document.body.scrollTop;
         else
            scrollY = document.documentElement.scrollTop;
      }   
      else  //其他浏览器
      {
         scrollX = window.pageXOffset;
         scrollY = window.pageYOffset;
      }
   
      document.forms[formID].xCoordHolder.value = scrollX;
      document.forms[formID].yCoordHolder.value = scrollY;
   }
    
   function sstchur_SmartScroller_Scroll()  //重新设置滚动条
   {
      var x = document.forms[formID].xCoordHolder.value;
      var y = document.formsformID].yCoordHolder.value;
      window.scrollTo(x, y);
   }
   
   window.onload = sstchur_SmartScroller_Scroll;
   window.onscroll = sstchur_SmartScroller_GetCoords;
   window.onkeypress = sstchur_SmartScroller_GetCoords;
   window.onclick = sstchur_SmartScroller_GetCoords;
// -->
<script>