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

    public class Person { int a=6;//声明实例变量制定默认值,也可以认为是对象的初始化代码,执行顺序与源代码中的排列顺序相同 { System.out.println(&qu ...

  2. Android性能优化典范（一）

    2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...

  3. ASP.NET请求管道、应用程序生命周期、整体运行机制

    我们知道在ASP.NET中,若要对ASP.NET应用程序进行 初始化并使它处理请求,必须执行一些处理步骤,熟悉应用程序生命周期非常重要,这样才能在适当的生命周期阶段编写代码,达到预期的效果.永远不要做 ...

  4. 编译的时候找不到包 但是maven denpendencies已经有这个包 。或者myeclipse 为webroot eclipse为webContext需要修改

    在Eclipse中生成项目是WebContent目录 而在MyEclipse中生成的项目目录名字好像叫做WebRoot,那么如果把MyEclipse的项目导入到Eclipse中,如果要部署项目到Tom ...

  5. easyui tree自定义属性用法

    easyui为树显示提供了以下属性, id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data text: 显示的节点文本 stat ...

  6. 1 bootstrap table null默认显示为 - 要查源码 2 记一个很无语的bug

    本来返回的json 3个true 7个false的 结果显示10个true 因为本来是好的 结果判断的问题 给全部赋值true了

  7. C++ opencv高速样例学习——读图显示

    1.关键函数 1. 读入图片 imread(图片或位置,显示格式)默觉得:IMREAD_COLOR 显示格式: IMREAD_UNCHANGED =-1    // 8bit, color or no ...

  8. CentOS添加新网卡network-scripts目录下找不到网卡配置文件

    问题描述: 使用VMware Workstation虚拟机,安装好CentOS7虚拟机后(原本只有一张网卡ifcfg-ens33),重新添加了一个新的网卡. 进入CentOS7系统后,使用ip add ...

  9. spring和hibernate整合，事务管理

    一.spring和hibernate整合开发步骤 1 引入jar文件,用户libarary列表如下 //spring_core spring3..9core\commons-logging-1.2.j ...

  10. Wpf 自定义控件(1)

    1. 新建一个wpf工程,在工程下面新建   一个文件夹themes,在themes下新建两个资源字典文件generic.xaml和PrettySeekBar.xaml generic.xaml   ...