HTML javascript bookmark user viewing position

Question

I have a html webpage. It contains a very long text passage. User can use internet browser to read the passage. Since the passage is long, users need to scroll the page to read the whole passage. I would like to add a floating box button for user to click. After clicking the button, I can capture the current viewing portion of the passage. So that users can log in later and continue reading.

I think I need to add some javascript, but after hours of online searching, I failed to find relevant information. Please kindly suggest the possible solution to do so?

Answer 1

Use a position:fixed box/button. Clicking it stores (or updates, if it already exists) a localStorage item or cookie with the current position. On page load, if that item exists, ask the user if they want to return to that spot.

There are two ways of doing this:

1. Save position as a pixel value. This works perfectly if the user's display will not change size (switching computers, switching monitors, changing screen resolution setting, etc.). However, if any of those changes do occur, the absolute pixel value of the saved position is not consistent with the position on the page.

   Demo. To run: click "Save position", scroll anywhere, then reload the page.

2. Save position as a percentage of total height. This works exactly as solution (1), but handles all cases in which screen size changes as well. (Use this one.) The code provided below pertains to this solution.

   Demo. To run: click "Save position"; change the width of the "Result" quadrant; without changing any code, click "Run" again.

The saved item is removed regardless of the user's choice (to return to the last spot or not), so that the prompt doesn't show up every time the page is reloaded (which can get annoying).

This is pure JS; it's very modular; it demonstrates simple usage of localStorage and falls back gracefully to cookies.

HTML

<div id="save">
    <button id="saveButton">Save position</button>
    <span id="saved">Saved!</span>
</div>
<div id="content">
    <!-- Disgustingly long content -->
</div>

CSS

#save {
    position:fixed;
    top:30px;
    left:10px;
    width:20%;
}
#saved {
    visibility:hidden;
    color:green;
}
#content {
    width:60%;
    margin:auto;
}

JS

function checkStorageSupport() {
    var test = "test";
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

function getTotalHeight() {
    return document.body.clientHeight;
}

function getSavedPercent() {
    var percent = storageSupported ? loadFromStorage() : loadFromCookie();
    return (percent == null || percent == "") ? 0 : percent;
}


/******* Save *******/

function saveInStorage() {
    localStorage.setItem("scrollPercent", (document.documentElement.scrollTop / getTotalHeight()));
}

function saveCookie() {
    var expDate = new Date();
    expDate.setDate(expDate.getDate() + 7); // start over if it's been more than ___ days
    document.cookie = "scrollPercent=" + (document.documentElement.scrollTop / getTotalHeight())
                + "; " + expDate;         
}


/******* Load *******/

function loadFromStorage() {
    return localStorage.getItem("scrollPercent");
}

function loadFromCookie() {
    return document.cookie.replace(/(?:(?:^|.*;\s*)scrollPercent\s*\=\s*([^;]*).*$)|^.*$/, "$1");
}


/******* Remove *******/

function removeFromStorage() {
    localStorage.removeItem("scrollPercent");
}

function removeCookie() {
    document.cookie = "scrollPercent=''";
}


/******* Handler *******/

var saveButton = document.getElementById("saveButton"),
    saved = document.getElementById("saved");

saveButton.onclick = function() {
    storageSupported ? saveInStorage() : saveCookie();
    saved.style.visibility = "visible";
    setTimeout(function() {
        saved.style.visibility = "hidden";
    }, 1500);
};


/******* Logic *******/

var storageSupported = checkStorageSupport(),
    percent = getSavedPercent();

if (percent > 0) {
    if (confirm("Would you like to continue reading where you left off?")) {
        document.documentElement.scrollTop = percent * getTotalHeight();
    }
    storageSupported ? removeFromStorage() : removeCookie();
}

---

Note: to get back to the code that produces solution (1), copy the code from that demo. In the case JSFiddle goes down, here are manual instructions:

• Remove every instance of / getTotalHeight() in a "Save" function
• In the "Logic" section, replace position * getTotalHeight() with position
• Remove getTotalHeight(), since it's not used
• Replace instances of "percent" with "position" to be more semantically accurate

Answer 2

Basic idea is..

create a floating bookmark button on the page like:

#mybookmark{
position: fixed;
top:30px;
right:0;
}

Now in jquery.. retrieve the position of this floating bookmark when clicked on it..

$('#mybookmark').click(function(){
    var bookmark_loc = $('#mybookmark').offset().top();
});

Store this bookmark_loc data in your preferred storage for the user.

then when they clicks on a button, you can scroll to the stored offset value in your storage.. in jquery

$('#scroll_to_bookmark').click(function{
var bookmark_loc = //Fetch bookmark
$('body').animate({ scrollTop: bookmark_loc; });
});