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

来源:互联网 发布:军软件下载站 编辑:程序博客网 时间:2024/05/19 13:44

 方法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 onscroll=SetCookie("scroll",body.scrollTop); onload="scrollback();">