Link to home
Start Free TrialLog in
Avatar of Bluze
Bluze

asked on

Remembering the scrollbar position of a DIV between pages

Hi all,

I've got a page of thumbnail images, that are set in a DIV with the overflow set to auto, so that the user can scroll through the images within the set area.

The user can click on a thumbnail to view further information about that product, then click a link to take them back to the page of thumbnails.

My problem is this. When the user returns from the details page, I'd like them to be returned to it with the scrollbars exactly how they left them. By default they're being returned to the top of the DIV again, and have to scroll down to continue browsing the thumbnails from where they left off.

I found this bit of code, which is very useful:

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

With this, if I put a reference to the loadScroll() function in the body, and the SaveScroll() in the link, it remembers the scrollbar position of the main browser window - I'm sure this could be altered to remember the position of the DIV scrollbars instead, but I can't work out how!

Any help on this would be most appreciated.

Many thanks,

Bluze
ASKER CERTIFIED SOLUTION
Avatar of weareu
weareu
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Bluze
Bluze

ASKER

Yep, works like a dream; nice one, and thanks!