刷新后 页面 保持滚动条位置

如何使页面刷新后仍然保持滚动条位置,有几种方法:

1. MaintainScrollPositionOnPostBack 最好

在Page_Load 中加入 Page.MaintainScrollPositionOnPostBack = True

或者在页面的<%@ Page  %> 中加入MaintainScrollPositionOnPostBack = True  一样的效果

2.SmartNavigation

在Page_Load 中加入 Page.SmartNavigation= True

或者在页面的<%@ Page  %> 中加入SmartNavigation= True 

这中方法已经过时了,有的时候会出现CSS的样式无法显示的情况

3.javasvript方法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"])
4.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();">
posted @ 2010-02-23 10:13  与时俱进  阅读(5543)  评论(1编辑  收藏  举报
友情链接:同里老宅院民居客栈