如何使页面刷新后仍然保持滚动条位置,有几种方法:
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 >
<!--
// 获取当前文件名
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 >
<!--
/* 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();"
>