Remember the last post I read

by

I like this question so had a look at it myself. The best way I could think to go about it would be to use localstorage and jQuery to store the current URL and scroll position of the user. Then you could either run a check when they come back to that page or have a button like “continue reading” which would retrieve the URL and the scroll position sending the user to that exact point.

JS

if(typeof(Storage) !== "undefined") {

Check is local storage is supported

var storedResult = localStorage.getItem("location");
var storedURL = localStorage.getItem("url");

Get the Stored URL and Scroll Location

 if (storedURL !== 'undefined' && storedResult !== null) {

Check if the URL is stored
var currentUrl = window.location.href;
Get the current URL

     if (currentUrl != storedURL) {

Check if the current URL and Stored URL Do Not match.

Send user to stored URL. You would probably want to trigger this on a “continue reading” button or something otherwise you could end up sending users where they dont wish to go.

}
    else if (storedResult !== 'undefined' && storedResult !== null) {

elseif check if the window scroll location is stored.

        $(window).scrollTop(storedResult);

scroll to that location.

}
 } 
    $(window).scroll(function () {

On scroll event

    var scrolledDown = window.scrollY;
    var currentUrl = window.location.href;

get the window scroll potion and url

    localStorage.setItem("location", scrolledDown);
    localStorage.setItem("url", currentUrl);

store in local storage.

});

 } else {

    //No Web Storage Support.
 }

All together

if(typeof(Storage) !== "undefined") {
//Check is local storage is supported

var storedResult = localStorage.getItem("location");
var storedURL = localStorage.getItem("url");
//Get the Stored URL and Scroll Location

 if (storedURL !== 'undefined' && storedResult !== null) {
     //Check if the URL is stored
     var currentUrl = window.location.href;
     //Get the current URL
     if (currentUrl != storedURL) {
         //Check if the current URL and Stored URL Do Not match.

         // send user to stored URL. You would probably want to trigger this on a "continue reading" button or something otherwise you could end up sending users where they dont wish to go.
     }

    else if (storedResult !== 'undefined' && storedResult !== null) {
        //elseif check if the window scroll location is stored.

        $(window).scrollTop(storedResult);
        //scroll to that location.
    }
 }

$(window).scroll(function () { 
    //On scroll event
    var scrolledDown = window.scrollY;
    var currentUrl = window.location.href;
    // get the window scroll potion and url
    localStorage.setItem("location", scrolledDown);
    localStorage.setItem("url", currentUrl);
    // store in local storage.
});

} else {
    // No Web Storage Support.
}

Demo

JSFiddle: https://jsfiddle.net/fg9uok4L/

Resources

jQuery .scrollTop: http://api.jquery.com/scrollTop/
jQuery .scroll: http://api.jquery.com/scroll/
LocalStorage: http://www.smashingmagazine.com/2010/10/local-storage-and-how-to-use-it/

Not sure on performance with this not tested.

Leave a Comment