用Cookie保存和恢复进度条

有时候我们需要在一个较长的列表中选择并刷新页面,刷新后页面会跳转到最顶部,当需要连续选择的时候就会很麻烦,每次选择后都要滚动到原先位置再选择下一个。

还有在分页程序中,如果一页显示的记录比较多,导致翻页后要滚动屏幕才能点击到翻页按钮,那么每次翻页后都要滚动屏幕,当需要连续翻页的时候就会很麻烦。

在做目录树的时候我们可以用无刷新技术,但是比较麻烦,而且在记录集分页显示的时候用无刷新技术明显是不可能的。

有鉴于此,我通过Cookie实现了保存页面进度条情况,每次跳转后自动跳转到原先进度的功能,希望对一些朋友们有用。

Scroll.asp如下:

<%
‘————————
‘Project By BTwork Studio
‘Code:[BT]Ok
‘Date:2006-4-4
‘————————
%>
<script language=”javascript”>
function SaveScroll()
{
//保存进度条情况
document.cookie = “Scroll=” + escape(document.body.scrollTop);
}

function ReadScroll()
{
//读取进度条情况
var aCookie = document.cookie.split(“; “);
for (var i=0; i < aCookie.length; i++)
{
var aCrumb = aCookie.split(“=”);
if (“Scroll” == aCrumb[0])
return unescape(aCrumb[1]);
}
}

function GoScroll()
{
//跳转进度条
var Scroll;
Scroll = ReadScroll();
window.scrollTo(0,Scroll);
}

function ClearScroll()
{
//清空进度条
document.cookie = “Scroll=0; expires=Fri, 31 Dec 1999 23:59:59 GMT;”;
}
</script>

————————————————————————

在页面首部include调用Scroll.asp,然后在修改<body>:

<body onLoad=”<%If Request(“Page”) = 1 Then%>ClearScroll()<%Else%>GoScroll()<%End If%>”>

其中Request(“Page”) = 1是初始化条件,你可根据情况更换。当设定条件成立时将清空Cookie中的进度条。

最后修改翻页的连接:

<a href=”?page=<%=Page+1%>” onclick=”SaveScroll()”>上一页</a>

大功告成,试试吧。

This entry was posted in IT技术, Javascript and tagged . Bookmark the permalink.