Question

When I Jump to section 1 & 2 everything works fine, and the browsers I tested (IE8, FF3.6, Chrome 5.0.342.3) scrolls down to the respective anchor in the div. But when I press the browser history back button the div won’t scroll back up.

Is there some way to make this work without using javascript ?

<div id="scrolldiv" style="overflow:auto; width:500px; height:500px; border:2px solid #e1e1e1; "> 
<a href="#link1">Jump to section 1</a> <br />
<a href="#link2">Jump to section 2</a> <br />

<h1 id="link1" name="link1">Section 1</h1> 
<p>lots of text<br />lots of text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> 

<h1 id="link2" name="link2">Section 2</h1> 
<p>lots of text<br />lots of text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> 

Answer 1

You could try linking to /pagename.htm#topofpage where there’s an anchor at the top of the page. Anyone who got to your page without clicking on the link you provide to that page won’t get the effect, but anyone who goes to /pagename.htm#topofpage should, I think (not tested), get position-sensitive additions to their browser history.

Also, with very little javascript you should be able to make the page go to that hash when it’s first loaded, which would then enable anyone visiting /pagename.htm to get to /pagename.htm#topofpage. Just insert:

<script type="text/javascript" language="javascript">
  location.hash = "#topofpage";
</script>

The theory is that the first time someone visits the page the script runs, putting them at #topofpage, and that subsequently it won’t run unless they refresh.