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

    C++ new的nothrow关键字和new_handler用法 new && new(std::nothrow) new(std::nothrow) 顾名思义,即不抛出异常,当new ...

  2. Unity3D入门基础之游戏对象 (GameObject) 和组件 (Component) 的关系

    原文出处:http://edu.china.unity3d.com/learning_document/getData?file=/Manual/TheGameObject-ComponentRela ...

  3. 算法笔记_091:蓝桥杯练习 递推求值（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 已知递推公式: F(n, 1)=F(n-1, 2) + 2F(n-3, 1) + 5, F(n, 2)=F(n-1, 1) + 3F(n- ...

  4. Android出现“Read-only file system”解决办法

    操作设备文件系统上的文件结果遇到"... Read-only file system". 解决办法: 1. 最简单的,adb remount 2. 不行的话,adb shell s ...

  5. python基础教程_学习笔记12：充电时刻——模块

    充电时刻--模块 python的标准安装包含一组模块,称为标准库. 模块 >>> import math >>> math.sin(0) 0.0 模块是程序 不论什 ...

  6. Hibernate 入门示例

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

  7. js+CSS 实现可以编辑的下拉列表框

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  8. ExtJS学习------Ext.define的继承extend，用javascript实现相似Ext的继承

    (1)Ext.define的继承extend 详细实例: Ext.onReady(function(){ //Sup Class 父类 Ext.define('Person',{ config:{ n ...

  9. git 简单使用规范

    分支管理办法 创建一个主仓库dev 每个成员fork一份dev分支 在自己fork出来的代码里做开发 开发完成后发出一个合并请求 pull request,等待被其他有合并权限的同事合并代码,合并代码 ...

  10. linux kvm 的虚拟机处于暂停状态怎么开机 和　KVM-Virsh指令

    [root@ok home]# virsh list Id Name State ---------------------------------------------------- 13svn ...