页面刷新/回传后页面保持滚动条位置 asp.net / JS

最新推荐文章于 2021-08-03 15:48:20 发布

Summer_Dream_Journey

最新推荐文章于 2021-08-03 15:48:20 发布

阅读量1.7k

点赞数

文章标签： asp.net javascript function scroll null html

本文链接：https://blog.csdn.net/Summer_Dream_Journey/article/details/7445866

版权

方法1 页面属性MaintainScrollPositionOnPostBack （最好）

1.1 应用程序中

作用对象：网站的所有ASP.NET页面
方法：打开web.config，在<system.web>节点下配置：
　　 <pages maintainScrollPositionOnPostBack="true"></pages>

1.2 页面属性

作用对象：某一个页面
方法：打开页面的 aspx 文件，在顶部配置：
　　 <%@ Page MaintainScrollPositionOnPostback="true"

1.3 代码控制

作用对象：某一页面
方法：在代码文件中书写：
　　 Page.MaintainScrollPositionOnPostBack = true; 或
　　 this.MaintainScrollPositionOnPostBack = true;

方法2 JavaScript

2.1 如果ascx（Custom Control）自定义空间太长，可以用jscript实现保持滚动条位置效果

<script language="javascript">
<!--
//  获取当前文件名
function getFileName()
{
    var url = this.location.href;
    var pos = url.lastIndexOf("/");
    if(pos == -1)
        pos = url.lastIndexOf("\\");
    var filename = url.substr(pos+1);
    return filename;
}
function fnLoad()
{
    with(window.document.body)
    {
        addBehavior ("#default#userData");    // 使 得body元素可以支持userdate
        load("scrollState" + getFileName());    // 获 取以前保存在userdate中的状态
        if (sFirstEnter=="0")
        {   scrollLeft = getAttribute("scrollLeft");    // 滚 动条左位置
            scrollTop = getAttribute("scrollTop");
        }
    }
}
function fnUnload()
{
    with(window.document.body)
    {   setAttribute("scrollLeft",scrollLeft);
        setAttribute("scrollTop",scrollTop);
        save("scrollState" + getFileName());    
        // 防止受其他文件的userdate数据影响，所以将文件名加上了
        // userdate里的数据是不能跨 目录访问的
    }
}
window.onload = fnLoad;
window.onunload = fnUnload;
// -->
</script>

网上说只要具有scroll属性的html控件，都可以用这个方法来实现页面刷新后的滚动条的定位。当然，函数是要做一下改动。把 with（window.document.body）中的body改为其他控件的ID就可以了： with（window.document.all["控件ID"]）

2.2 javascript 方法2

这是在网上看到的另一种用JS保持页面滚动条位置

<SCRIPT LANGUAGE="JavaScript">
<!--   
  /*haiwa@2004-02-12*/   
  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>

然后修改BODY位置为
<BODY id=body οnscrοll=SetCookie("scroll",body.scrollTop); οnlοad="scrollback();">