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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
var COOKIE_NAME = "scroll";
 
$(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);
}