【转载】[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!

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

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

 

【转载】[JS]让表单提交返回后保持在原来提交的位置上<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

页面此时才正常.

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

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

google一下,发现改成:

 

【转载】[JS]让表单提交返回后保持在原来提交的位置上<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

 

【转载】[JS]让表单提交返回后保持在原来提交的位置上var scrollPos; 
【转载】[JS]让表单提交返回后保持在原来提交的位置上if (typeof window.pageYOffset != ‘undefined‘) 
【转载】[JS]让表单提交返回后保持在原来提交的位置上
【转载】[JS]让表单提交返回后保持在原来提交的位置上   scrollPos = window.pageYOffset; 
【转载】[JS]让表单提交返回后保持在原来提交的位置上
【转载】[JS]让表单提交返回后保持在原来提交的位置上else if (typeof document.compatMode != ‘undefined‘ &&    document.compatMode != ‘BackCompat‘) 
【转载】[JS]让表单提交返回后保持在原来提交的位置上
【转载】[JS]让表单提交返回后保持在原来提交的位置上   scrollPos = document.documentElement.scrollTop; 
【转载】[JS]让表单提交返回后保持在原来提交的位置上
【转载】[JS]让表单提交返回后保持在原来提交的位置上else if (typeof document.body != ‘undefined‘) 
【转载】[JS]让表单提交返回后保持在原来提交的位置上
【转载】[JS]让表单提交返回后保持在原来提交的位置上   scrollPos = document.body.scrollTop; 
【转载】[JS]让表单提交返回后保持在原来提交的位置上
【转载】[JS]让表单提交返回后保持在原来提交的位置上alert(scrollPos);
【转载】[JS]让表单提交返回后保持在原来提交的位置上
【转载】[JS]让表单提交返回后保持在原来提交的位置上

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("查询关键字没有填写!\n\n请检查!");
  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]让表单提交返回后保持在原来提交的位置上,布布扣,bubuko.com

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

上一篇:SDWebImage 图片加载和缓存


下一篇:JS获取屏幕大小