我试图设置"页面" (使用可见/隐藏的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> </p>
<p> </p>
<p> </p>
<p> </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%"> </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> </h2>
<h2> </h2>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h2> </h2>
<h2>CO-APPLICANT INFORMATION</h2></td>
</tr>
<tr>
<td width="32%" class="interiortext">*Required Field</td>
<td width="68%"> </td>
</tr>
<tr>
<td colspan="2" class="interiortext">*First Name
<input type="text" name="textfield14" id="textfield23">
MI
<input name="textfield14" type="text" id="textfield24" size="2">
*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">
(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> </p></td>
</tr>
</table>
<!-- PREVIOUS and NEXT buttons -->
<input type="button" value="back" onClick="pagechange(0);">
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
答案 0 :(得分:0)
当您单击后退按钮时,这可能会导致页面滚动尴尬,但它肯定不会让页面向下滚动到文档的中间位置。
在HTML中添加:
<body onload="myFunction()">
这是<script>
标记:
<script>
function myFunction() {
window.scrollTo(0, 0);
}
</script>