有时候，在网页中点击了页面中的按钮或是刷新了页面后，页面滚动条又 会回到顶部，想看后面的记录就又要拖动滚动条，或者要按翻页键，非常不方便，想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变，最好的办法就是 在JS中用cookie记录下当前滚动条的位置，然后刷新时读取cookie就可以实现这个功能了。
代码如下：
<script type="text/javascript">
            function  Trim(strValue)    
            {    
                    return   strValue.replace(/^s*|s*$/g,"");    
            }
                
            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　== Trim(aCrumb[0]))    
                   {    
                       return unescape(aCrumb[1]);    
                   }    
                  }    
    
               　　return null;    
             }
                
           function scrollback()    
           {    
                 if(GetCookie("scroll")!=null){document.body.scrollTop=GetCookie("scroll")}    
           }    
     </script>
然后在html页面中设置<body id=body   onscroll=SetCookie("scroll",body.scrollTop);   onload="scrollback();">就可以在刷新或提交后滚动条的位置保持不变了。

上面的是通用的解决方法，在.net中还可以用<pages maintainScrollPositionOnPostBack="true">这个配置，更容易。

JS刷新页面后滚动条的位置不变的更多相关文章

  1. 如何防止js刷新页面后倒计时改变

    1.存入cookie或localstorage(清除浏览器缓存后时间依然改变) 2.存入数据库

  2. JS利用cookie记录当前位置实现刷新页面后还可以保持菜单栏的展开或闭合

    代码如下,重点是JS部分的代码(部分样式引用的是Bootstrapt中的):   <style> .sidebar-menu .special{ font-size: 16px; marg ...

  3. 刷新页面后，让控制台的js代码继续执行

    在各种限时,秒杀活动中,有个自动循环的点击的工具是很重要的. 为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行. 可以用js代码实现一个不受页面刷新影 ...

  4. 解决Vuex持久化插件-在F5刷新页面后数据不见的问题

    页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionSt ...

  5. js刷新页面和跳转

    javascript返回上一页: 1.返回上一页 history.go(-1); 返回上两个页面 history.go(-2); <a href="javascript:history ...

  6. 网站开发进阶(二十六)js刷新页面方法大全

    js刷新页面方法大全 在项目开发过程中,需要实现刷新页面.经过学习,发现下面这条语句就可以轻松实现. location.reload(); // 刷新页面 有关刷新页面的其它方法,具体学习内容如下,有 ...

  7. 为什么js引入页面后不起作用？

    为什么js引入页面后不起作用? 例如常见的报错:Uncaught ReferenceError: $ is not defined. 可能出现这种情况的原因如下: 原因一: 引入js的位置不对,应在使 ...

  8. js刷新页面方法大全（转）

    刷新页面实现方式总结(HTML,ASP,JS) 转载  2008-11-13   作者:    我要评论 多种方法实现页面的刷新代码 定时刷新: 1,<script>setTimeout( ...

  9. js刷新页面有哪几种方法

    js刷新页面有哪几种方法 一.总结 一句话总结:location属性的reload方法即可:document.location.reload() 1.页面刷新有哪常见的8种方法? 1,history. ...

随机推荐

  1. static 关键字 静态属性与方法 -> :: self $this 区别 可见性的关键字区别

    1.声明类属性或方法为静态,就可以不实例化类而直接访问.静态属性不能通过一个类已实例化的对象来访问(但静态方法可以). 2.由于静态方法不需要通过对象即可调用,所以伪变量 $this 在静态方法中不可 ...

  2. vue - utils for extract-text-webpack-plugin

    描述:将包或包中的文本提取到单独的文件中, 点击查看官网详情: https://www.npmjs.com/package/extract-text-webpack-plugin

  3. 一步一步学Spring.NET——1、Spring.NET环境准备

    Spring.NET 1.3.2下载地址:http://down.51cto.com/data/861700 下载后解压 Spring.NET-1.3.2.7z:这个里面有我们须要用到的全部东西. S ...

  4. Hibernate 入门示例

    版权声明:本文为博主原创文章,如需转载请标注转载地址 博客地址:http://www.cnblogs.com/caoyc/p/5593406.html  环境: myelipse2015+Hibern ...

  5. 仿网易/QQ空间视频列表滚动连播炫酷效果

    代码地址如下:http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境 需要下载七牛的开源播放器SDK 本例子实现了仿网易/ ...

  6. 【PHP】组合条件搜索SQL

    前端html多个搜索条件组合 后台一个sql语句,很方便和简洁:仅提供思路. 也可以配合着进行分页操作,非常赞~

  7. LaTeX 在编译时出现 File ended while scanning use of \@writefile错误

    LaTeX -在修改论文过程中,重新编译时.出现了File ended while scanning use of \@writefile错误,如以下所示: 问题出现的原因: 因为aux文件没有完整输 ...

  8. 广告系统的smart pricing是什么

    smart pricing这个词来源于google的Adwords系统,指的是系统能够根据流量质量对流量方的收入进行打折,为的是让广告主获得更高的ROI(投资回报率).将smart pricing的使 ...

  9. mysql主从复制原理及实现

    一.主从复制原理 利用MySQL提供的Replication,其实就是Slave从Master获取Binary log文件,然后再本地镜像的执行日志中记录的操作.由于主从复制的过程是异步的,因此Sla ...

  10. EMQ学习笔记---Clean Session和Retained Message

    MQTT会话(Clean Session)MQTT客户端向服务器发起CONNECT请求时,可以通过’Clean Session’标志设置会话.‘Clean Session’设置为0,表示创建一个持久会 ...