Log in

View Full Version : 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



<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>





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


This is my index.php -



<!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

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

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

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

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

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

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

class main is defined as

.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.


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.