zoukankan      html  css  js  c++  java
  • 【转载】[JS]让表单提交返回后保持在原来提交的位置上

    有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好的办法就是 在JS中用cookie记录下当前滚动条的位置,然后刷新时读取cookie就可以实现这个功能了。
    代码如下:
    <script type="text/javascript">
    function Trim(strValue)
    {
    //return strValue.replace(/^s*|s*$/g,"");
    return strValue; 
    }

    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>
    然后在html页面中设置<body id=body onscroll=SetCookie("scroll",document.body.scrollTop); onload="scrollback();">就可以在刷新或提交后滚动条的位置保持不变了。

    如果不好用,这里修改下:document.body.scrollTop修改为document.documentElement.scrollTop

    当你用asp.net开发web页面时,你会发现,如果你设置了一个页面,如果里面含有多个Button,而且页面很长。
    当你点击ButtonPostBack时,页面总是显示在最上面,极其不方便。

    但下面这段代码,写帮你解决这个问题。

    <input type="submit" name="Button1" value="Button" id="Button1" />
    <input type="hidden" id="Window_OffsetY" name="Window_OffsetY" value="0">
    <input type="hidden" id="Window_OffsetX" name="Window_OffsetX" value="0">

    <script language="Javascript">
    var ua = navigator.userAgent.toLowerCase();
    var isIE = (ua.indexOf('msie') != -1 && !this.isOpera && (ua.indexOf('webtv') == -1) );

    function Window_OnSubmitIE(){
        document.getElementById("Window_OffsetY").value = window.event.offsetY - window.event.clientY + 2;
        document.getElementById("Window_OffsetX").value = window.event.offsetX - window.event.clientX + 2 ;
    }

    function Window_OnSubmitNS(event){
        document.getElementById("Window_OffsetY").value = event.pageY - event.clientY;
        document.getElementById("Window_OffsetX").value = event.pageX - event.clientX;
    }


    if (!isIE){
        document.forms[0].addEventListener('submit',Window_OnSubmitNS, false);
    }
    else{
        document.forms[0].attachEvent('onsubmit',Window_OnSubmitIE);
    }


    function Lili1_OnLoad(){
        window.scrollTo(0,1431);
    }


    if (!isIE){
        window.addEventListener('load',Lili1_OnLoad, false);
    }
    else{
        window.attachEvent('onload',Lili1_OnLoad);
    }
    </script>
     
     
     
     

    最近写了一个拖动层的HTML页面,   需要获取滚动条当前的位置.

    于是我使用document.body.scrolltop获取y方向滚动的位置...奇怪的事情出现了! 无论滚动条怎么滚动,document.body.scrolltop竟然一直都是0!

    对比以前写的一个页面.发现区别很小. 旧页面却没有问题.这就怪了...

    我开始一点一点的排除,去掉多于的代码. 直到我去掉文档最顶部的

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    页面此时才正常.

    原来是这行东西造成IE无法获取document.body.scrolltop!

    把顶部这两行删掉将可以了.但是为什么会这样呢?

    google一下,发现改成:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    就可以了,但页面稍有变化,感觉不爽,于是又在google里找,终于解决:

    var scrollPos; 
    if (typeof window.pageYOffset != 'undefined') 

       scrollPos = window.pageYOffset; 

    else if (typeof document.compatMode != 'undefined' &&    document.compatMode != 'BackCompat') 

       scrollPos = document.documentElement.scrollTop; 

    else if (typeof document.body != 'undefined') 

       scrollPos = document.body.scrollTop; 

    alert(scrollPos);

    document.body.scrollTop 
    要改成 
    document.documentElement.scrollTop

    关于js中 document.body.scrollTop 不能返回正确值的原因

    本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素,但是不管滚动条在什么位置总是返回是0,造成这样的原因和html的头部声明有关,如果头部声明 为:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">,这样肯定得到的结果是 0,如果该为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">就能得到正确的结果,对于第一种头部声明想要得滚动条的滚动的高度怎么办,解决方法有两种

    1、var scrollPos; 

    if (typeof window.pageYOffset != 'undefined') {
    scrollPos = window.pageYOffset;
    }
    else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
    scrollPos = document.documentElement.scrollTop;
    }
    else if (typeof document.body != 'undefined') {
    scrollPos = document.body.scrollTop;
    }

    2、用document.documentElement.scrollTop 替代 document.body.scrollTop

    JS控制form表单提交的位置  

    <script language = "JavaScript">
    function CheckForm()
    {

     if (document.myform.keytext.value == "") {
      alert("查询关键字没有填写! 请检查!");
      document.myform.keytext.focus();
      return false;
     }
        
     if (document.myform.cl.value == 1) 
      {
       document.myform.action="yqjsj.asp?keytext="+myform.keytext.value;
       document.myform.submit(); 
      }
     else if (document.myform.cl.value == 2)
      {
       document.myform.action="sjzz.asp?keytext="+myform.keytext.value;
       document.myform.submit(); 
      }
     else if (document.myform.cl.value == 3)
      {
       document.myform.action="gjhc.asp?keytext="+myform.keytext.value;
       document.myform.submit(); 
      }
     else if (document.myform.cl.value == 4)
      {
       document.myform.action="jyjqr.asp?keytext="+myform.keytext.value;
       document.myform.submit(); 
      }
    }
    </script>

    var oFix = document.getElementById("divfix");

    oFix.style.top = document.documentElement.scrollTop + "px";

  • 相关阅读:
    解决移动端页面在苹果端滑不到底部的问题
    js点击事件在苹果端失效的问题
    小程序开发基本步骤
    css多行文本省略号(...)
    js判断pc端和移动端的方法
    主流浏览器css兼容问题的总结
    让ie6对png透明图片支持起来
    ajax的探究与使用
    css3实现逐渐变大的圆填充div背景的效果
    js中setTimeout()时间参数设置为0的探讨
  • 原文地址:https://www.cnblogs.com/summer_adai/p/3849151.html
Copyright © 2011-2022 走看看