Retain scroll position on page reload

JavaScript
1

Hi!

I’ve tried several solutions for this and have gotten close but right now I’m stumped.

Basically, I need to retain the existing scroll position on a page when it reloads but also to ignore any #anchors that are in the url.

Could someone help me write this please?

Many thanks
Mike

2

reload means manual refresh or on event fired reload through coding ?

3

Yes, basically certain form changes reload the page.

4

I think this code will give idea to you.


<head>
<title>Untitled Document</title>
<script>
// function saves scroll position
function fScroll(val)
{
        var hidScroll = document.getElementById('hidScroll');
        hidScroll.value = val.scrollTop;
}

// function moves scroll position to saved value
function fScrollMove(what)
{
        var hidScroll = document.getElementById('hidScroll');
        document.getElementById(what).scrollTop = hidScroll.value;
}
</script>
</head>

<body  onload="fScrollMove('div_scroll');" onunload="document.forms(0).submit()";>
<form>
<input type="text" id="hidScroll" name="a"><br/>
<div  id="div_scroll"  onscroll="fScroll(this);"
style="overflow:auto;height:100px;width:500px;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
.. VERY LONG TEXT GOES HERE

</div>
</form>

</BODY>
</HTML>
5

Is there a way to apply this code to the whole page as opposed to a container?

6

put the page contents under this div

7

I tried that actually (I removed the overflow and height styles) but I don’t think it’s working. The figure on in the text field isn’t altering when I scroll.

8

without overflow we couldnt track this scrolling position.

9 


<script type="text/javascript">
function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}
</script>

you can call the above function one before page reload and save it in cookie ,or use for input fields. after that using window.scrollTo function go to previous scroll position