有时候，在网页中点击了页面中的按钮或是刷新了页面后，页面滚动条又 会回到顶部，想看后面的记录就又要拖动滚动条，或者要按翻页键，非常不方便，想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变，最好的办法就是 在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. redis学习笔记——初始化

    初始化服务器状态结构 redis中一个最重要的数据结构是redis_server,会创建一个这个结构的全局变量server,初始化服务器的第一步就是创建一个struct redisServer类型的实 ...

  2. 主动通知Android系统图库进行更新

    项目中遇到调用图库进行图片的选择,因为不能主动及时更新,遂实现代码调用实现主动及时更新. 废话不多刷,看代码. 方式一,发送一个广播, sendBroadcast(new Intent(Intent. ...

  3. iframe中，页面转换后回到页面的顶部

    看到网上有这样描述的: 现在A页面内分为上下两个部分,上部分是top,下部分分左右,左是treeview右边是iframe,iframe内嵌一个B页面,B页面的内容实质上是个月刊,可以理解为杂志,里面 ...

  4. Spring之替换Bean的返回结果,替换Bean的方法实例

    Spring是一个非常强悍的框架+容器,其中有代理模式(动态代理模式)的极致体现.下面是两个比较让人感觉精彩的代码使用,重点关注main方法中的ClassPathXMlApplicationConte ...

  5. iOS程序发布测试-生成ad hoc证书

    转自: http://blog.sina.com.cn/s/blog_68444e230100srdn.html iOS程序发布测试3-生成ad hoc证书 iOS证书分2种,1种是开发证书,用来给你 ...

  6. 禁止 git 自动转换换行符

    开发团队都在 windows 下开发,有IDE管理代码.对我们来说,最好是禁用换行转换符的功能.我用 cygwin 提交代码,提交时总提示自动转换换符.其实都不用提交,仅运行 git status 看 ...

  7. 【Hibernate步步为营】--锁机制具体解释

    上篇文章具体讨论了hql的各种查询方法.在讨论过程中写了代码演示样例.hql的查询方法类似于sql,查询的方法比較简单,有sql基础的开发者在使用hql时就会变得相当的简单. Hibernate在操作 ...

  8. java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter /struts2.1.3以前版本和之后版本区别/新版Eclipse找不到Java EE Module Dependencies选项

    严重: Exception starting filter struts2java.lang.ClassNotFoundException: org.apache.struts2.dispatcher ...

  9. python selenium --命令之文字范本匹配

    文字范本匹配 ======================================= 文字范本匹配其实可以理解为通配符.我想大家都用过windows 系统自带的搜索功能. *   星号代表一个 ...

  10. docker容器互连

    三种方式 1.使用容器连接的示例如下: $ docker run --name some-app --link itbilu-mysql:mysql -d application-that-uses- ...