刷新后 页面 保持滚动条位置
如何使页面刷新后仍然保持滚动条位置,有几种方法:
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();">