在pagechange函数上跳转到页面顶部?

时间:2014-10-17 13:50:47

标签: javascript forms function

我试图设置"页面" (使用可见/隐藏的div)并且一切正常,除了从第二页单击BACK按钮(向下滚动到该页面的底部)之后,它落在第一页的中间,我需要它跳到该页面的顶部。 NEXT按钮将后续页面置于顶部,这是完美的。

以下是展示此问题的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>

1 个答案:

答案 0 :(得分:0)

当您单击后退按钮时,这可能会导致页面滚动尴尬,但它肯定不会让页面向下滚动到文档的中间位置。

在HTML中添加:

<body onload="myFunction()">

这是<script>标记:

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