Maintain browser scroll position on refresh

**monkeypuppet** · 03-27-2009, 04:21 AM

Hi, been looking for a solution for days.

I want the browser to remember the scroll position and recall it when the user changes pages or refreshes.

I got this script working in Firefox but neither IE6 or IE7 ...

http://www.webreference.com/js/tips/991203.html

Code:

<SCRIPT LANGUAGE="JavaScript">
<!--

var db = (document.body) ? 1 : 0;
var scroll = (window.scrollTo) ? 1 : 0;

function setCookie(name, value, expires, path, domain, secure) {
  var curCookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
  document.cookie = curCookie;
}

function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } else {
    begin += 2;
  }
  var end = document.cookie.indexOf(";", begin);
  if (end == -1) end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}

function saveScroll() {
  if (!scroll) return;
  var now = new Date();
  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
  var x = (db) ? document.body.scrollLeft : pageXOffset;
  var y = (db) ? document.body.scrollTop : pageYOffset;
  setCookie("xy", x + "_" + y, now);
}

function loadScroll() {
  if (!scroll) return;
  var xy = getCookie("xy");
  if (!xy) return;
  var ar = xy.split("_");
  if (ar.length == 2) scrollTo(parseInt(ar[0]), parseInt(ar[1]));
}

// -->
</SCRIPT>

Code:

<BODY onLoad="loadScroll()" onUnload="saveScroll()">

This is my index.php -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



<SCRIPT LANGUAGE="JavaScript">
<!--

var db = (document.body) ? 1 : 0;
var scroll = (window.scrollTo) ? 1 : 0;

function setCookie(name, value, expires, path, domain, secure) {
  var curCookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
  document.cookie = curCookie;
}

function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } else {
    begin += 2;
  }
  var end = document.cookie.indexOf(";", begin);
  if (end == -1) end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}

function saveScroll() {
  if (!scroll) return;
  var now = new Date();
  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
  var x = (db) ? document.body.scrollLeft : pageXOffset;
  var y = (db) ? document.body.scrollTop : pageYOffset;
  setCookie("xy", x + "_" + y, now);
}

function loadScroll() {
  if (!scroll) return;
  var xy = getCookie("xy");
  if (!xy) return;
  var ar = xy.split("_");
  if (ar.length == 2) scrollTo(parseInt(ar[0]), parseInt(ar[1]));
}


// -->
</SCRIPT>

<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->

<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->

<jdoc:include type="head" />



<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_css.css" rel="stylesheet" type="text/css" />




</head>

<BODY onLoad="loadScroll()" onUnload="saveScroll()">


<div id="supercontainer">
<div id="banner"></div>
<div id="middlecontainer">
<div id="innercontainer">

<div id="topcontainer">

<div id="leftcontainer">
<div id="menucontainer">
<div id="menu"><jdoc:include type="modules" name="user3" /></div>
</div>
</div>

<div id="rightcontainer">
<div id="contenttop"></div>
<div id="contentmiddle"><jdoc:include type="modules" name="user4" /></div>
<div id="contentbase"></div>
</div>

</div>

<div id="subbottomcontainer"">
<div id="productcontainertop"></div>

<div id="productcontainermiddle"><jdoc:include type="component" style="xhtml" /></div>
<div id="productcontainerbottom"></div>
</div>


</div>
</div>
<div id="bottomcontainer">
<div id="copy">
&copy; A site 2009 <br />Site by &nbsp<a href="http://www.site.com/">Site</a>
</div>
</div>

</div>

</body>

</html>

If anyone could help me, it would be very appreciated.

**monkeypuppet** · 04-07-2009, 03:40 AM

Hey, find it hard to believe that nobody knows how to do this. You see it in forums all the time.

Happy to pay $100 AUS for a fully working solution.

**sxRossi** · 04-17-2009, 09:11 AM

Hi,
i was also looking for such a feature and based on the script i created a solution for firefox and my css based pages.

1) the js-script

Code:

function POSREMsetCookie(name, value, expires, path, domain, secure) {
  var curCookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
  document.cookie = curCookie;
}

function POSREMgetCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } else {
    begin += 2;
  }
  var end = document.cookie.indexOf(";", begin);
  if (end == -1) end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}

function POSREMsaveScroll() {

 var elem=document.getElementById('maincontent')
 
 if (!elem) return;
 var scroll = (window.scrollTo) ? 1 : 0;

  if (!scroll) return;
  var now = new Date();
  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
  var x = (elem) ? elem.scrollLeft : pageXOffset;
  var y = (elem) ? elem.scrollTop : pageYOffset;
  
  POSREMsetCookie("xy", x + "_" + y, now);
}

function POSREMloadScroll() {
  var elem=document.getElementById('maincontent')
  if (!elem) return;
  var scroll = (window.scrollTo) ? 1 : 0;
  if (!scroll) return;
  var xy = POSREMgetCookie("xy");
  if (!xy) return;
  var ar = xy.split("_");
  
  if (ar.length == 2){
	 
	  
	  elem.scrollLeft=ar[0] ;
	  elem.scrollTop=ar[1] ;
  }
  
}


==> gave an POSREM prefix to be more significant
==> at the moment it is hardcoded to use an element with the id "maincontent"
==> script is located in an separate file PositionRemember.js

2)
The Head-section becomes the scriptinclusion

HTML Code:

<script type="text/javascript" src="./js/PositionRemember.js"></script>

3)
The Body-Tag becomes the onLoad and onUnload Functions

HTML Code:

<BODY onLoad="POSREMloadScroll()" onUnload="POSREMsaveScroll()">

4)
and my "Maincontent"-Area is declared with

HTML Code:

<div id="maincontent" class="main" style="overflow:scroll">

class main is defined as

Code:

.main  {
	position:fixed ; 
	border:0px ; 
	top:92px ; 
	left:146px ; 
	/*width:73em;*/
	width:952px;
	/*
	height:40em;
	*/
	height:600px;
	
	/*
	background: #ececec url(background.jpg) repeat-x ;  
	background: #ececec ;  
	background-color: #eceded ; 
	
	*/
	
	background-color: white ; 
	color: black ; 
	
	font-size: 12px ; 
	font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif ;
	z-index: 1;
	}

Summary

due to the fixed width and height in the class definition and the overflow:scroll declaration the page was ugly to use when the lists where long. Now it returns to the last position. Another effect: the usage of id="maincontent" controls wich pages are POSREM-enabled.

At the moment i think it could be an open problem due to the saving of
the position in an cookie with the name xy wich isnt significant enough
to use it in multiple pages (and users use multiple browser tabs). But now
its friday and i think by myself this is a good thing for the next week.

Good luck

Michael

**sxRossi** · 04-21-2009, 05:48 AM

Hi,
now i sent the js-script wich has gone in production yesterday. The changes
are:
Qualified cookie with url-pathname "window.location.pathname". I tested it with additional window.location.search (includes url-parameters)- but this was too fine since i use url-parameters to sort output etc.
Stripped the save-cookie function, it
stores now a session cookie (who wants to store the scroll-values over a year?)

Since i use the same script to list records and showing their details the php script does this to support the position remembering and to protect the scroll-cookie from being destroyed in the detail-view.

Code:

if( stripos($task, 'Manage') !== false) # url sounds like ?task=ManageSomething
  	{
  		$mainid='main'.__LINE__ ;
  	}
  	else
  	{
  		$mainid='maincontent' ;
  	}
  	
  	echo '<div id="'.$mainid.'" class="main" style="overflow:scroll">' ;

(task is a variable based on a url parameter)

Not to forget:
-All things are firefox tested only since IE is hardly blocked in the current project i didnt made testing with it.

Thread: Maintain browser scroll position on refresh

Thread Tools

Search Thread

Maintain browser scroll position on refresh

Bookmarks

Bookmarks

Posting Permissions