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

最新推荐文章于 2026-01-18 18:06:58 发布

原创最新推荐文章于 2026-01-18 18:06:58 发布 · 1.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

.Net

当前文章被收录于：

.Net

37 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用纯JavaScript实现的页面滚动位置保存的方法。通过在页面加载和卸载时记录滚动位置，并利用JavaScript行为扩展来保存这些状态，使得用户在重新加载页面时能够回到之前的位置。

找了一个纯js版的，在稍加修改，让它更完善些，下载只需在codebind中的page_load事件中添加一行代码，让好引用js，就行了。代码如下：

page_load
Page.RegisterStartupScript("scroll","<script language=javascript>Init()</script>");

js脚本
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");
    load("scrollState" + getFileName());
    scrollLeft = getAttribute("scrollLeft");
    scrollTop = getAttribute("scrollTop");
   }
}

function fnUnload()
{
   with(window.document.body)
   {
    setAttribute("scrollLeft",scrollLeft);
    setAttribute("scrollTop",scrollTop);
    save("scrollState" + getFileName());
   }
}

window.onload = fnLoad;
window.onunload = fnUnload;

function Init()
{
   with(window.document.body)
   {
    addBehavior ("#default#userData");
    load("scrollState" + getFileName());
    scrollLeft = 0;
    scrollTop = 0;
    setAttribute("scrollLeft",0);
    setAttribute("scrollTop",0);
    save("scrollState" + getFileName());
   }
}