【轉載】[JS]讓表單提交返回後保持在原來提交的位置上

時間 2019-12-12

原文原文鏈接

有時候，在網頁中點擊了頁面中的按鈕或是刷新了頁面後，頁面滾動條又會回到頂部，想看後面的記錄就又要拖動滾動條，或者要按翻頁鍵，很是不方便，想在提交頁面或者在頁面刷新的時候仍然保持滾動條的位置不變，最好的辦法就是在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();">就能夠在刷新或提交後滾動條的位置保持不變了。javascript

若是很差用，這裏修改下：document.body.scrollTop修改成document.documentElement.scrollTophtml

當你用asp.net開發web頁面時，你會發現，若是你設置了一個頁面，若是裏面含有多個Button，並且頁面很長。
當你點擊Button後PostBack時，頁面老是顯示在最上面，極其不方便。

但下面這段代碼，寫幫你解決這個問題。

java

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

document.body.scrollTop老是0的緣由

最近寫了一個拖動層的HTML頁面, 須要獲取滾動條當前的位置.web

因而我使用document.body.scrolltop獲取y方向滾動的位置...奇怪的事情出現了! 不管滾動條怎麼滾動,document.body.scrolltop居然一直都是0!瀏覽器

對比之前寫的一個頁面.發現區別很小. 舊頁面卻沒有問題.這就怪了...cookie

我開始一點一點的排除,去掉多於的代碼. 直到我去掉文檔最頂部的asp.net

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

頁面此時才正常.this

原來是這行東西形成IE沒法獲取document.body.scrolltop!google

把頂部這兩行刪掉將能夠了.可是爲何會這樣呢?spa

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">就能獲得正確的結果，對於第一種頭部聲明想要得滾動條的滾動的高度怎麼辦，解決方法有兩種

一、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;
}

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

JS控制form表單提交的位置

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>