Keeping Scrollbar Position On Refresh

This site is best viewed in a modern browser with JavaScript enabled.

bazjones

I have a page which uses <meta http-equiv="refresh" content="240">

The problem im having is if i am half way downthe page when it refreshes, the refresh takes me back to the top of the page is it possible for the browser to keep the scrollbar position on refresh so that i do not loose my position on the page??

Thanks

Baz

A1ien51

Somehow you will need to keep track of the scroll position. Most likely a session cookie.

Set the value with onscroll and when the page loads check the value of the cookie. If it exists then scroll there with scrollTo().

If I were not busy at work, I would write it for you.

Eric

Mr_J

Take a look here, this might do you

www.huntingground.freeserve.co.uk/scripts/cookies/scrollpos.htm

Rajni

<SCRIPT LANGUAGE="JavaScript">
<!--
function getCookie(name)
{
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ";", len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}

function doload()
{
var scrollTop = getCookie ("scrollTop");
var scrollLeft = getCookie("scrollLeft");

  if (!isNaN(scrollTop))
  {
		  document.body.scrollTop = scrollTop;
		  document.documentElement.scrollTop = scrollTop;

  }
   if (!isNaN(scrollLeft))
  	  {
  			  document.body.scrollLeft = scrollLeft;
  			  document.documentElement.scrollLeft = scrollLeft;
  }

  Delete_Cookie("scrollTop");
  Delete_Cookie("scrollLeft");
  setTimeout( "Refresh()", 120*1000 );

}

function Refresh()
{
document.cookie = 'scrollTop=' + f_scrollTop();
document.cookie = 'scrollLeft=' + f_scrollLeft();
document.location.reload(true);
}

//Setting the cookie for vertical position
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}

function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

//Setting the cookie for horizontal position
function f_scrollLeft() {
return f_filterResults (
window.pageXOffset ? window.pageXOffset : 0,
document.documentElement ? document.documentElement.scrollLeft : 0,
document.body ? document.body.scrollLeft : 0
);
}

function Delete_Cookie(name)
{
document.cookie = name + "=" + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";

}

window.onload=doload;

//-->

</SCRIPT>

gift2women

It is amazing that I could not find this anywhere on the web ... ty webdeveloper and Rajni!

rsduhamel

I have been searching for this off and on for a couple of years and all I could find were wrong answers, code that didn't work and long pages of complicated code just to remember the scroll position. It can't possibly be that difficult.

Well, it isn't. It is super easy. I had to search a bunch of forums then whittle down each example until I finally got it to work with a minimum of fluff. You don't need a zillion lines of code, just two javascript snippets and a PHP cookie getter. You should be able to do it with pure javascript but I didn't need to so I mixed in some PHP.

This saves your current scroll position in a cookie whenever you scroll. Whenever the page loads it gets the scroll position from the cookie and loads the page at that scroll position. Voila! No more jumping to the top of the page when you reload. It works for links as well as the http-equiv refresh. I tried it with FireFox 15.0.1 and Chrome.

First, in the body tag (using PHP):

   print "<body  onScroll=\"document.cookie='ypos=' + window.pageYOffset\" onLoad='window.scrollTo(0,$ypos)'>";

And, above this,in your PHP code before anything that causes output to the browser:

 $ypos = $_COOKIE["ypos"];

That's it. Works every time for me.

Logic_Ali

rsduhamel;1232867 wrote:
Well, it isn't. It is super easy. I had to search a bunch of forums then whittle down each example until I finally got it to work with a minimum of fluff. You don't need a zillion lines of code, just two javascript snippets and a PHP cookie getter. You should be able to do it with pure javascript but I didn't need to so I mixed in some PHP.

Fine if you have a server side language available, and you can be certain that nothing will overwrite your onscroll handler, and you'll never need to override the action when you link to your page using a #parameter or a querystring.

rsduhamel

A little more work and here it is with no PHP. Pure javascript.

First you need a read-cookie function. Put this in the <head> section of your page:

Next you modify the body tag as follows:

Credit to the following page where I stole the read-cookie function:

http://stackoverflow.com/questions/5639346/shortest-function-for-reading-a-cookie-in-javascript

mukarakaplan

rsduhamel;1233019 wrote:
A little more work and here it is with no PHP. Pure javascript.

First you need a read-cookie function. Put this in the <head> section of your page:

<script language="JavaScript">
function readCookie(name){
return(document.cookie.match('(^|; )'+name+'=([^{;]*)')||0)[2]}
}
</script>

Next you modify the body tag as follows:

<body onScroll=\"document.cookie='ypos=' + window.pageYOffset\" onLoad=\"window.scrollTo(0,readCookie('ypos'))\">

Credit to the following page where I stole the read-cookie function:

http://stackoverflow.com/questions/5639346/shortest-function-for-reading-a-cookie-in-javascript

I can't get this work for me. Below are two pages with the code but it doesn't work. What's the problem?

uweb.txstate.edu/~muk2/Untitled-1.html
uweb.txstate.edu/~muk2/Untitled-2.html

rsduhamel

Oops!

Terrible mistake on my part. I cut and pasted this from my PHP code. I tried to remove all the extras but missed some backslashes. Here is the fixed code.

rsduhamel;1233019 wrote:
A little more work and here it is with no PHP. Pure javascript.

First you need a read-cookie function. Put this in the <head> section of your page:

<script language="JavaScript">
function readCookie(name){
return(document.cookie.match('(^|; )'+name+'=([^{;]*)')||0)[2]}
}
</script>

Next you modify the body tag as follows:

<body onScroll="document.cookie='ypos=' + window.pageYOffset" onLoad="window.scrollTo(0,readCookie('ypos'))">

Credit to the following page where I stole the read-cookie function:

http://stackoverflow.com/questions/5639346/shortest-function-for-reading-a-cookie-in-javascript

rsduhamel

My mistake. I forgot to remove some backslashes when I cut and pasted this from my PHP code. Remove the backslashes and it should work.

Minna_Aleppo

Wonderful beat ! I would like to apprentice at the same time as you amend your site, how could i subscribe for a wephorum website? The account helped me a appropriate deal. I had been a little bit familiar of this your broadcast provided shiny transparent concept best wishes

cloudponds

rsduhamel,

My experience was much the same as yours until I found your solution. I find it to work beautifully in all major browsers except, of course, IE. Would you kindly supply the code for an IE workaround. Thanks.

blackandyellow

rsduhamel;1235773 wrote:
Oops!

Terrible mistake on my part. I cut and pasted this from my PHP code. I tried to remove all the extras but missed some backslashes. Here is the fixed code.

THANK YOU RSDUHAMEL, YOUR CODE WAS AMAZING (even over two years after you posted it, aha.) I have searched for days on code to do just that and NOTHING worked. I did not have an account on this site previously so I made one just to thank you (: THANK you! You've saved me lots of trouble and I wish I'd found your comment earlier. I don't know if you will read this but you made my day, so thank you and God bless.