Setting the screen position when visiting previous page with jQuery
The scenario
This problem came while I was working on a client’s website. Take this scenario. I have a listing page (similar to a listing page from www.trademe.co.nz or www.ascent.co.nz ). They have a lot of listings. Each listing has a hyperlink going to a detail page which describes more about each listing.
If you have quite a large page of listings, the user has to scroll down the page to find the listing they want to click on. The problem is, when they click on the link and go to the details page, what happens when the click back and they end up back at the top of the page again? This can be quite annoying. It would be “nice” to get the browser to go back to the previous position on the listing page.
The Approach
We achieve this but attach a click event handler to the specific a tags that we want to record the last clicked position from the user before we redirect to the next page. This means when the user goes back to the previous page they will be taken to the exact position on the page. When the click event happens we always override what was in the cookie so that we don’t end up with several pages and positions. We don’t want a user to go to another page they have been to before and set the scroll position, it should only happen to the previous page.
Here is the code
$(document).ready(function () {
// Check to see if the user already has the cookie set to scroll
var scrollPosition = getCookiePosition(COOKIE_NAME);
if (scrollPosition.length > 0) {
// Scroll to the position of the last link clicked
window.scrollTo(0, parseInt(scrollPosition, 10));
}
// Attach an overriding click event for each link
// saveScrollPosition function can be called before the user is redirected.
$("a.savel").each(function () {
$(this).click(function () {
saveScrollPosition($(this));
});
});
});
// Get the offset (height from top of page and the current page url) of the link element
// and save it in a cookie.
function saveScrollPosition(link) {
var linkTop = link.offset().top;
setCookie(COOKIE_NAME, "pos=" + linkTop + "&link=" + escape(window.location.pathname), 1);
}
//Trim whitespaces
function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}
// Get cookie helper function
function getCookiePosition(name) {
if (document.cookie.length > 0) {
//Get the right cookie
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
if (trim(cookies[i].split("=")[0]) == COOKIE_NAME) {
//Get the position of the & sign
var pos = cookies[i].indexOf("&");
if (pos > -1) {
//Get value
var scrollValue = cookies[i].split("=")[2].substring(0, cookies[i].split("=")[2].indexOf("&"));
var link = unescape(trim(cookies[i].split("=")[3]));
//if the link is the same as the current page, then assume user wants to go back to the same position
if (link == window.location.pathname) return scrollValue;
}
return "";
}
}
return "";
}
return "";
}
//Method to create a new cookie
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
// Set cookie
function setCookie(name, value, expiredays) {
//Remove all other cookies
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
if (trim(cookies[i].split("=")[0]) == COOKIE_NAME) {
createCookie(trim(cookies[i].split("=")[0]), "", -1);
}
}
//Set the new cookie
createCookie(name, value, expiredays);
}


