在页面更改功能上跳转到页面顶部
Jump to the top of the page on pagechange 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> </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>
当您单击后退按钮时，这可能会导致页面滚动尴尬，但肯定不会让页面向下滚动到文档的中间。
将其添加到HTML:中
<body onload="myFunction()">
这个在<script>标签中：
<script>
function myFunction() {
window.scrollTo(0, 0);
}
</script>
相关文章：
- 主体单击删除功能上的输入框宽度
- 在接受功能上访问燃料UX标语牌中的“this”
- JavaScript功能上的谷歌地图
- 在顶部框架上显示模态弹出窗口
- 点击功能上的JQuery按钮不起作用
- 在jQuery点击功能上显示特定数量的
- 使用实习生在功能上测试元素是否可见(没有元素覆盖）
- 计数功能上的数字划分
- 如何阻止我的汉堡图标停留在顶部栏上，使其与侧边菜单一起显示
- “功能上”生成一个仅包含几个元素的列表
- 数组中的第一个视频始终是第一个或第二个在下一个视频功能上播放
- 在复选框检查的更改功能上需要计算一个值
- 在选项卡的点击功能上初始化猫头鹰轮播
- 在同一功能上使用多个按钮重定向到不同的功能
- 异常捕获在功能上是否与承诺错误回调相同
- 移动到顶部功能在kineticJ中不起作用
- 在页面更改功能上跳转到页面顶部
- 滚动到网页的顶部功能
- 我要在鼠标悬停功能上更改 javascript 中
- 功能上的多个承诺
