[JS]让表单提交返回后保持在原来提交的位置上

发布于:2016年05月17日 已被阅读

有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好的办法就是 在JS中用cookie记录下当前滚动条的位置,然后刷新时读取cookie就可以实现这个功能了。
代码如下:

  1. <script type="text/javascript">

  2.             function  Trim(strValue)     

  3.             {     

  4. //return   strValue.replace(/^s*|s*$/g,""); 

  5. return strValue;     

  6.             }


  7.             function SetCookie(sName,sValue)     

  8.             {     

  9.                    document.cookie = sName + "=" + escape(sValue);     

  10.            }   


  11.            function GetCookie(sName)     

  12.            {     

  13.                  var aCookie = document.cookie.split(";");     

  14.                for(var i=0; i < aCookie.length; i++)     

  15.                {     

  16.                      var aCrumb = aCookie[i].split("=");     

  17.                    if(sName == Trim(aCrumb[0]))     

  18.                    {     

  19.                        return unescape(aCrumb[1]);     

  20.                    }     

  21.                   }     


  22.   return null;     

  23.              } 


  24.            function scrollback()     

  25.            {     

  26.                  if(GetCookie("scroll")!=null){document.body.scrollTop=GetCookie("scroll")}     

  27.            }     

  28.      </script>

复制代码


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


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


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

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


  1. <input type="submit" name="Button1" value="Button" id="Button1" />

  2. <input type="hidden" id="Window_OffsetY" name="Window_OffsetY" value="0">

  3. <input type="hidden" id="Window_OffsetX" name="Window_OffsetX" value="0">


  4. <script language="Javascript">

  5. var ua = navigator.userAgent.toLowerCase();

  6. var isIE = (ua.indexOf('msie') != -1 && !this.isOpera && (ua.indexOf('webtv') == -1) );


  7. function Window_OnSubmitIE(){

  8.     document.getElementById("Window_OffsetY").value = window.event.offsetY - window.event.clientY + 2;

  9.     document.getElementById("Window_OffsetX").value = window.event.offsetX - window.event.clientX + 2 ;

  10. }


  11. function Window_OnSubmitNS(event){

  12.     document.getElementById("Window_OffsetY").value = event.pageY - event.clientY;

  13.     document.getElementById("Window_OffsetX").value = event.pageX - event.clientX;

  14. }


  15. if (!isIE){

  16.     document.forms[0].addEventListener('submit',Window_OnSubmitNS, false);

  17. }

  18. else{

  19.     document.forms[0].attachEvent('onsubmit',Window_OnSubmitIE);

  20. }


  21. function Lili1_OnLoad(){

  22.     window.scrollTo(0,1431);

  23. }


  24. if (!isIE){

  25.     window.addEventListener('load',Lili1_OnLoad, false);

  26. }

  27. else{

  28.     window.attachEvent('onload',Lili1_OnLoad);

  29. }

  30. </script>

复制代码




document.body.scrollTop总是0的原因

最近写了一个拖动层的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里找,终于解决:

  1. var scrollPos; 

  2. if (typeof window.pageYOffset != 'undefined') 


  3.    scrollPos = window.pageYOffset; 


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


  5.    scrollPos = document.documentElement.scrollTop; 


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


  7.    scrollPos = document.body.scrollTop; 


  8. 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; 

  1. if (typeof window.pageYOffset != 'undefined') {    

  2.         scrollPos = window.pageYOffset; 


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

  4.         scrollPos = document.documentElement.scrollTop; 


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

  6.         scrollPos = document.body.scrollTop; 

  7. }

复制代码


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


JS控制form表单提交的位置   

  1. <script language = "JavaScript">

  2. function CheckForm()

  3. { if (document.myform.keytext.value == "") {

  4.   alert("查询关键字没有填写!\n\n请检查!");

  5.   document.myform.keytext.focus();

  6.   return false;

  7. }

  8.     

  9. if (document.myform.cl.value == 1) 

  10.   {

  11.    document.myform.action="yqjsj.asp?keytext="+myform.keytext.value;

  12.    document.myform.submit(); 

  13.   }

  14. else if (document.myform.cl.value == 2)

  15.   {

  16.    document.myform.action="sjzz.asp?keytext="+myform.keytext.value;

  17.    document.myform.submit(); 

  18.   }

  19. else if (document.myform.cl.value == 3)

  20.   {

  21.    document.myform.action="gjhc.asp?keytext="+myform.keytext.value;

  22.    document.myform.submit(); 

  23.   }

  24. else if (document.myform.cl.value == 4)

  25.   {

  26.    document.myform.action="jyjqr.asp?keytext="+myform.keytext.value;

  27.    document.myform.submit(); 

  28.   }

  29. }

  30. </script>

复制代码



  1. var oFix = document.getElementById("divfix");oFix.style.top = document.documentElement.scrollTop + "px";

复制代码



来源:http://www.cnblogs.com/summer_adai/p/3849151.html