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

一时失言乱红尘 2022-08-07 03:41 150阅读 0赞

有时候，在网页中点击了页面中的按钮或是刷新了页面后，页面滚动条又 会回到顶部，想看后面的记录就又要拖动滚动条，或者要按翻页键，非常不方便，想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变，最好的办法就是 在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.    
    
8.              function SetCookie(sName,sValue)       
    
9.              \{       
    
10.                    document.cookie = sName + "=" + escape(sValue);       
    
11.            \}     
    
12.   
    
13.            function GetCookie(sName)       
    
14.            \{       
    
15.                  var aCookie = document.cookie.split(";");       
    
16.                for(var　i=0;　i　< aCookie.length;　i++)       
    
17.                \{       
    
18.                      var aCrumb = aCookie\[i\].split("=");       
    
19.                    if(sName　== Trim(aCrumb\[0\]))       
    
20.                    \{       
    
21.                        return unescape(aCrumb\[1\]);       
    
22.                    \}       
    
23.                   \}       
    
24.   
    
25. 　　return null;       
    
26.              \}   
    
27.   
    
28.            function scrollback()       
    
29.            \{       
    
30.                  if(GetCookie("scroll")!=null)\{document.body.scrollTop=GetCookie("scroll")\}       
    
31.            \}       
    
32.      </script>

复制代码

然后在html页面中设置<body id=body   οnscrοll=SetCookie("scroll",document.body.scrollTop);  >就可以在刷新或提交后滚动条的位置保持不变了。  
  
如果不好用，这里修改下：document.body.scrollTop修改为document.documentElement.scrollTop  
  
  
当你用asp.net开发web页面时，你会发现，如果你设置了一个页面，如果里面含有多个Button，而且页面很长。  
当你点击Button后PostBack时，页面总是显示在最上面，极其不方便。  
  
但下面这段代码，写帮你解决这个问题。

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.    
    
5.  <script language="Javascript">  
    
6.  var ua = navigator.userAgent.toLowerCase();  
    
7.  var isIE = (ua.indexOf('msie') != -1 && !this.isOpera && (ua.indexOf('webtv') == -1) );  
    
8.    
    
9.  function Window\_OnSubmitIE()\{  
    
10.     document.getElementById("Window\_OffsetY").value = window.event.offsetY - window.event.clientY + 2;  
    
11.     document.getElementById("Window\_OffsetX").value = window.event.offsetX - window.event.clientX + 2 ;  
    
12. \}  
    
13.   
    
14. function Window\_OnSubmitNS(event)\{  
    
15.     document.getElementById("Window\_OffsetY").value = event.pageY - event.clientY;  
    
16.     document.getElementById("Window\_OffsetX").value = event.pageX - event.clientX;  
    
17. \}  
    
18.   
    
19. if (!isIE)\{  
    
20.     document.forms\[0\].addEventListener('submit',Window\_OnSubmitNS, false);  
    
21. \}  
    
22. else\{  
    
23.     document.forms\[0\].attachEvent('onsubmit',Window\_OnSubmitIE);  
    
24. \}  
    
25.   
    
26. function Lili1\_OnLoad()\{  
    
27.     window.scrollTo(0,1431);  
    
28. \}  
    
29.   
    
30. if (!isIE)\{  
    
31.     window.addEventListener('load',Lili1\_OnLoad, false);  
    
32. \}  
    
33. else\{  
    
34.     window.attachEvent('onload',Lili1\_OnLoad);  
    
35. \}  
    
36. </script>

复制代码

[document.body.scrollTop总是0的原因][document.body.scrollTop_0]  
  
最近写了一个拖动层的HTML页面,   需要获取滚动条当前的位置.  
于是我使用document.body.scrolltop获取y方向滚动的位置...奇怪的事情出现了! 无论滚动条怎么滚动,document.body.scrolltop竟然一直都是0!  
对比以前写的一个页面.发现区别很小. 旧页面却没有问题.这就怪了...  
我开始一点一点的排除,去掉多于的代码. 直到我去掉文档最顶部的  
  
![None.gif][]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  
页面此时才正常.  
原来是这行东西造成IE无法获取document.body.scrolltop!  
把顶部这两行删掉将可以了.但是为什么会这样呢?  
google一下,发现改成:  
  
![None.gif][]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
就可以了,但页面稍有变化，感觉不爽，于是又在google里找，终于解决：  
  
![None.gif][]

1.  var scrollPos;   
    
2.  if (typeof window.pageYOffset != 'undefined')   
    
3.  \{   
    
4.     scrollPos = window.pageYOffset;   
    
5.  \}   
    
6.  else if (typeof document.compatMode != 'undefined' &&    document.compatMode != 'BackCompat')   
    
7.  \{   
    
8.     scrollPos = document.documentElement.scrollTop;   
    
9.  \}   
    
10. else if (typeof document.body != 'undefined')   
    
11. \{   
    
12.    scrollPos = document.body.scrollTop;   
    
13. \}   
    
14. alert(scrollPos);

复制代码

![None.gif][]  
document.body.scrollTop   
要改成   
document.documentElement.scrollTop  
  
[关于js中 document.body.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][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.  \}   
    
4.  else if (typeof document.compatMode != 'undefined' &&      document.compatMode != 'BackCompat') \{     
    
5.          scrollPos = document.documentElement.scrollTop;   
    
6.  \}   
    
7.  else if (typeof document.body != 'undefined') \{  
    
8.          scrollPos = document.body.scrollTop;   
    
9.  \}

复制代码

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

复制代码

[document.body.scrollTop_0]: http://blog.csdn.net/ked/article/details/1506587
[None.gif]: /images/20220805/5220877c862e4f3cac4fb0162a587ac6.png
[js_ document.body.scrollTop]: http://blog.csdn.net/netingcn/article/details/2585450
[http_www.w3.org_TR_html4_loose.dtd]: http://www.w3.org/TR/html4/loose.dtd