zoukankan      html  css  js  c++  java
  • 刷新后 页面 保持滚动条位置

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

    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();">
  • 相关阅读:
    [svc]二三层数据格式&&三层数据如何匹配路由
    [na][dhcp]dhcp细枝末节&dhcp防攻
    [docker]使用quaaga实现(rip ospf)实现主机间容器互通
    [svc]centos7安装优化最佳姿势
    [svc]gns3模拟器及探讨几个bgp问题
    [svc]ip routing和no ip routing
    [docker]macvlan实现双vlan互通
    Jmeter 日志设置---如何设置java协议中被测jar的日志?
    Jmeter java协议配置文件导入
    eclipse, Log4j配置(真心的详细~)
  • 原文地址:https://www.cnblogs.com/top5/p/1671725.html
Copyright © 2011-2022 走看看