Question

I have created a multi-page registration form for a website. Due to the page length differences when a user clicks through each page they wind up proportionally in the same page between the steps. This can leave the user having to scroll up to see the form steps. I hope that made sense, but my main question is how do I change the script so that it will reload to the top of the page at every interval?

Here is the current bit of code for the next page navigation:

<button style='float:right;' class='next-tab mover' type='submit' rel='\" + next + \"'>Next</button>\

This was taken from a php script. I have tried some obvious tests like using #top, but I could not get it to work. Any ideas?

Answer 1

Added width and height to the first div helped out. i also made the second div absolute to the first div:

<form id="form1" >
<div id="divHeader"     style="position:absolute;left:20px;top:20px;width:800px;height:600px;" >
Form Steps: <br />
<ul>
<li>Step1:  ....</li>
<li>Step2:  ....</li>
<li>Step3:  ....</li>
<li>Step4:  ....</li>
</ul>
</div>
<div id="divUserInput" style="width:100%;position:absolute;left:20px;top:140px;" >
<!--Form content here....-->
<table border="0">
<tr><td>Question 1</td><td><input type="text" id="txtQ1" /></td></tr>
<tr><td>Question 2</td><td><input type="text" id="txtQ2" /></td></tr>
<tr><td>Question 3</td><td><input type="text" id="txtQ3" /></td></tr>

</table>
</div>