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

    来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片 ...

  2. ajax同步和异步

    // 方案2: 回调函数 // function getFile( callback ){ // // 1: 创建ajax对象 XMLHttpRequest // var xhr = new XMLH ...

  3. 批量将代码中的 get_XXX 替换成 XXX

    使用 sed 只需要一个命令: sed -s -i 's/set_\([A-Za-z0-9_]*\)/\1 = /g' ` find . -name '*.cs' | xargs grep -l se ...

  4. Python之print详解

    Python之print详解 http://www.jb51.net/article/55768.htm   print的一些基本用法,在前面的讲述中也涉及一些,本讲是在复习的基础上,尽量再多点内容. ...

  5. MSSQL中循环

    1 declare @result table 2 ( 3 custid int, 4 ordermonth datetime, 5 qty int, 6 runqty int, 7 primary ...

  6. golang的各种数据格式的互相转换

    int to string import ( "strconv" ) int i = 10 str1 := strconv.Itoa(i) struct to json impor ...

  7. PL/SQL 美化器不能解析文本

    1.问题:PL/SQL美化器不能解析文本 原始sql语句如下: CREATE OR REPLACE VIEW V_GGXZBM AS SELECT XZBM,XZMC,CASE WHEN PARENT ...

  8. C语言 Linux环境变量

    /* *@author cody *@date 2014-08-12 *@description */ /* extern char **environ //environment values #i ...

  9. 如果你需要从不同的服务器（不同域名）上获取数据就需要使用跨域 HTTP 请求

    Response.AppendHeader("Access-Control-Allow-Origin", "*")Response.AppendHeader(& ...

  10. PHP的CURLOPT_POSTFIELDS参数使用数组和字符串的区别

    手册上解释: CURLOPT_POSTFIELDS  全部数据使用HTTP协议中的"POST"操作来发送.要发送文件,在文件名前面加上@前缀并使用完整路径.这个参数可以通过urle ...