跳轉到頁面頂部pagechange功能？

我試圖設置「頁面」（使用可見/隱藏div）和一切正常工作，除了當從第二頁點擊返回按鈕（滾動到該頁面的底部後），它着陸在第一頁的中間，我需要它跳轉到該頁面的頂部。 NEXT按鈕將隨後的頁面放在頂部，這是完美的。跳轉到頁面頂部pagechange功能？

下面是2個演示頁面展示此問題的代碼...任何幫助將不勝感激！

注意：表格和空格有意複製此表單最終會放在網站上的shell環境。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script> 


    function pagechange(currentPage) { 
    var divs=document.getElementsByTagName("div"); 
    for(var i=0;i<divs.length;i++){ 
     if(divs[i].id!=('formpage_'+(parseInt(currentPage)+1))){ 
      divs[i].style.display="none"; 
      divs[i].style.visibility='hidden'; 
     }else{ 
     divs[i].style.display="block"; 
     divs[i].style.visibility='visible'; 
     } 
    } 
    } 

    </script> 
</head> 

<body> 
<form action=".."> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
         <p>&nbsp;</p> 
<p>&nbsp;</p> 
         <p> 
          <!-- the first page has style set to be visible --> 
         </p> 
         <table width="1164" height="1051" border="0" cellpadding="0" cellspacing="0"> 
          <tr> 
          <td><div id="formpage_1" style="visibility: visible; display: block; .."> 
           <table width="158%" height="806" border="0" cellpadding="0" cellspacing="10"> 
           <tr> 
            <td colspan="2"><h2>APPLICANT INFORMATION</h2></td> 
           </tr> 
           <tr> 
            <td width="32%" class="interiortext">*Required Field</td> 
            <td width="68%">&nbsp;</td> 
           </tr> 
           <tr> 
            <td align="right" class="interiortext">Mailing Address Line 2</td> 
            <td class="interiortext"><input type="text" name="textfield13" id="textfield21" /></td> 
           </tr> 
           <tr> 
            <td align="right" class="interiortext">City</td> 
            <td class="interiortext"><input type="text" name="textfield13" id="textfield20" /></td> 
           </tr> 
           <tr> 
            <td align="right" class="interiortext">State</td> 
            <td class="interiortext"><input type="text" name="textfield13" id="textfield19" /></td> 
           </tr> 
           <tr> 
            <td align="right" class="interiortext">Zip Code</td> 
            <td class="interiortext"><input type="text" name="textfield13" id="textfield18" /></td> 
           </tr> 
           <tr> 
            <td class="interiortext">*Do you have a co-applicant?</td> 
            <td><table width="200"> 
            <tr> 
             <td width="79" class="interiortext"><label> 
             <input type="radio" name="lived2years" value="radio" id="lived2years_2" /> 
             Yes</label></td> 
             <td width="109" class="interiortext"><input type="radio" name="lived2years" value="radio" id="lived2years_1" /> 
             No</td> 
            </tr> 
            </table></td> 
           </tr> 
           </table> 
           <!-- NEXT button --> 
           <input type="button" value="next" onclick="pagechange(1);" /> 
          </div></td> 
          </tr> 
         </table> 
         <!-- the 2nd and following pages have style set to be invisible --> 
<div id="formpage_2" style="visibility: hidden; display: none; .."> 
          <table width="100%" border="0" cellspacing="10" cellpadding="0"> 
          <tr> 
           <td colspan="2"><h2>&nbsp;</h2> 
           <h2>&nbsp;</h2> 
           <p>&nbsp;</p> 
           <p>&nbsp;</p> 
           <p>&nbsp;</p> 
           <p>&nbsp;</p> 
           <h2>&nbsp;</h2> 
           <h2>CO-APPLICANT INFORMATION</h2></td> 
          </tr> 
          <tr> 
           <td width="32%" class="interiortext">*Required Field</td> 
           <td width="68%">&nbsp;</td> 
          </tr> 
          <tr> 
           <td colspan="2" class="interiortext">*First Name 
           <input type="text" name="textfield14" id="textfield23"> 
           &nbsp; MI 
           <input name="textfield14" type="text" id="textfield24" size="2"> 
           &nbsp; *Last Name 
           <input type="text" name="textfield14" id="textfield25"> 
           </td> 
          </tr> 
          <tr> 
           <td align="right" class="interiortext">*Date of Birth</td> 
           <td class="interiortext"> 
           <input type="text" name="textfield14" id="textfield26"> 
           &nbsp; (mm/dd/yy)</td> 
          </tr> 
          <tr> 
           <td align="right" class="interiortext">State</td> 
           <td class="interiortext"> 
           <input type="text" name="textfield14" id="textfield56"> 
           </td> 
          </tr> 
          <tr> 
           <td align="right" class="interiortext">Zip Code</td> 
           <td class="interiortext"> 
           <input type="text" name="textfield14" id="textfield55"> 
           </td> 
          </tr> 
          <tr> 
           <td class="interiortext">*Is the co-applicant a first-time homebuyer?</td> 
           <td><table width="200"> 
           <tr> 
            <td width="79" class="interiortext"> 
            <label> 
             <input type="radio" name="lived2years" value="radio" id="lived2years_11"> 
             Yes</label> 
            </td> 
            <td width="109" class="interiortext"> 
            <input type="radio" name="lived2years" value="radio" id="lived2years_12"> 
            No</td> 
           </tr> 
           </table> 
           <p>&nbsp;</p></td> 
          </tr> 
          </table> 
          <!-- PREVIOUS and NEXT buttons --> 
          <input type="button" value="back" onClick="pagechange(0);"> 

         </div> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
</body> 
</html>

來源

2014-10-17 bfrank

這可能會導致一個尷尬的頁面滾動當您單擊後退按鈕，但它會肯定不會讓頁面滾動到文檔中。在<script>標籤

<body onload="myFunction()">

這：

在HTML中添加此

<script> 
    function myFunction() { 
    window.scrollTo(0, 0); 
    } 
</script>

來源

2014-10-17 14:19:43 Jinandra

跳轉到頁面頂部pagechange功能？

回答

相關問題