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

时间:2022-12-31 17:12:36

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

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();" >