Maintain Scroll Position of large HTML page when client returns

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

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 2

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