Maintain Scroll Position of large HTML page when c

Question

I'm serving very long html pages (short ebooks)

When client returns, too much of a hassle to try to find exact place where left off due to long html page.

Is there a simple way to maintain the scroll position automatically so that next time the client returns to the page the page scrolls down automatically to where he left off. this needs to be transparent, i.e. no clicking to "store" scroll position.

Answer 1

You could always use the onbeforeunload event to check when the window is being closed, and set a cookie with the current position. Than every time the page is loaded just check if that cookie is set. If it is - use the value to redirect the user to the saved position.

Update

You should understand the concepts in order to make it work. You can read about cookies and how to interact with them in javascript here. The link contains a live example.

The onunload and onbeforeunload are javascript events which you can use to detect when your page is being closed. You should google what they are and how to use them.

You could check this stack-overflow question for an answer how to jump to a specific offset and this one to see how to retrive it.

I gave you all the puzzle pieces, it's up to you to put them together.

Answer 2

The steps are simple, but the solution to this question depends on your app implementation, you can:

• Retrieve the current scroll position, you can use:

  window.pageYOffset

• Store the position, this has two parts, when and where:

  • You can chose to store the data, when the window closes, or every time the user scroll, or on a set interval...

  • for the "where", depending on your app, you may want to store it, in a cookie, local-storage, on the server-side (if the user needs to log in to read the eBook)...

• Restore the position when the user return, by retrieving the stored data, and scroll to that position using

  window.scrollTo(0, position);

so the real problem here is, when and where to store the position, and that depends on your application.

Answer 3

I made small jquery plugin that you can include and have this functionallity without cookies etc. Include just before end of body tag.

  <script type="text/javascript" src="/js/maintainscroll.jquery.min.js"></script>
</body>

https://github.com/evaldsurtans/maintainscroll.jquery.js