I have a form divided into virtual layers that are alternately visible and hidden. I move between layers using buttons according to the following code:
<input type="button" id="B1" value="Go Back" onClick="showLayer('page2')">
<input type="button" id="C2" value="Continue" onClick="showLayer('page3')">
When I click either button, it moves me to the correct layer, but always to the same position on the page as the cursor was last. In other words, if I was 550px down the page when I clicked "Continue," the next layer opens at 550px down the screen. As the content of some layers is only a few px high, you have to scroll up to see the content. This is fine for me as I know there is something on the page, but for a visitor to the form, they will think they clicked through to a blank page and shut down.
How do I get it to open at the top of the next layer?
The layers are created by <div> tags with "page" style defined by css as follows:
I tried adding hyperlinks (#name) between the buttons and the top of each page, but this has no effect.