首页 .NET/Web ASP.NET页面刷新回传保持滚动条位置不变方法

ASP.NET页面刷新回传保持滚动条位置不变方法

作者:胡同里的砖头 围观群众:1618 更新于:2013-12-19

 

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

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

  • 本文标题: ASP.NET页面刷新回传保持滚动条位置不变方法
  • 文章分类:【.NET/Web】
  • 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
留言评论
站点声明:
1、本站【胡同里的砖头】个人博客,借鉴网上一些博客模板,取其各优点模块自行拼装开发,本博客开发纯属个人爱好。
2、所有笔记提供给广大用户交流使用,可转载,可复制,纯个人开发所遇问题锦集记录使用
Copyright © huzlblog.com All Rights Reserved. 备案号:苏ICP备2021056683号-8