Question

I have a page with two divs, one hidden and one displayed. When I click on a link at the bottom of the page, I want the hidden div to display and the displayed div to be hidden. It works fine, but if the browser height is small (e.g., on a mobile device) the user sees the div that gets displayed scrolled all the way to the bottom.

Here is the page:

<script type="text/javascript">
function display()
{
  document.getElementById('div2').style.display="block";
  document.getElementById('div1').style.display="none";
}
</script>

<!-- Start of content -->
  <div id="div1" style="display:block">
    <h2>This is shown at the beginning</h2>
    <p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
    <p>Hello</p><p>Hello</p><p>Hello</p>
    <a rel="external" href="bogus.tar.gz" onclick="display(); return true">Click here</a>
  </div>

  <div id="div2" style="display:none">
  <h2>This is shown later</h2>
    <p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
    <p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
  </div>

If I put the link at the top of the page, the problem goes away, but the flow of the page demands that the link be at the bottom of the page.

So how can I get the browser to show the top of the div once it gets displayed.

Answer 1

window.scrollTo(x, y)

If you want to scroll the page to the top use

window.scrollTo(0, 0)

Otherwise, change the second parameter.