Go back to the scroll bar position on a dynamically sized page

Question

I have a webpage that will dynamically load each time it's refreshed. If a user is editing an entry in the webpage, drills into a link for example. Then tries to press the back button, or hit a tab corresponding to the previous page also, how can I save the vertical scroll bar position and return them to the same position when clicking either the back button or the tab corresponding to the same page.

I've tried this, but it works for only pages that aren't dynamically loaded. How can I retain the scroll position of a scrollable area when pressing back button?

When you say dynamically loaded, are you saying the content is loaded after the page has loaded, making the page longer? — Sinan Guclu, Jul 11 '16 at 19:04
The html constructed "on the fly". Creating a table on the webpage, with number of rows increasing based on the amount of data loaded. It makes the page longer yes. — , Jul 11 '16 at 19:08

Sinan Guclu · Accepted Answer · 2016-07-11T22:46:18.080

You could use the same function in the question you linked but listen to the scroll event as opposed to the page unload event. That way the scroll position will be updated and stored every time the user scrolls.

Since the page is loaded dynamically, you can trigger an event once the content is loaded, that will cause the page to scroll:

$.get('/resource').done(function(){
    // Render...
    // Add a trigger after the content is loaded and rendered
    $(window).trigger('content:loaded');
}

var prevScrollHorizontal = 0;
var prevScrollVertical = 0;

$(function() {
   $("div#element").scroll(function() { // Listens for scroll events

      var currentHorizontal = $(this).scrollLeft();
      var currentVertical = $(this).scrollTop();

      if(prevScrollHorizontal != currentHorizontal) {
          prevScrollHorizontal = currentHorizontal;
          localStorage.setItem("scrollPositionHorizontal", currentHorizontal);
          // Scrolled horizontally
      }

      if(prevScrollVertical != currentVertical) {
          prevScrollVertical = currentVertical;
          localStorage.setItem("scrollPositionVertical", currentVertical);
          // Scrolled vertically
      }

   });

   // Listen for the 'content:loaded' event triggered above 
   $(window).on('content:loaded', function() {       
       if(localStorage.scrollPositionVertical) {                 
          $("div#element").scrollTop(localStorage.getItem("scrollPositionVertical"));
       }
       if(localStorage.scrollPositionHorizontal) {                 
          $("div#element").scrollLeft(localStorage.getItem("scrollPositionHorizontal"));
       }
    });
});

You can separate the different stored scroll objects using the window.location.pathname value to differentiate them:

$(function() {
   $(window).scroll(function() { // Listens for scroll events
      var scrollPosition = $("div#element").scrollTop();
      // Uses the pathname to set the scroll value
      localStorage.setItem("scrollPosition_"+window.location.pathname, scrollPosition);
   });

   if(localStorage.scrollPosition) {
      // Uses the pathname to get the scroll value   
      $("div#element").scrollTop(localStorage.getItem("scrollPosition_"+window.location.pathname)); 
   }
});

Read more about the scroll event here.
and more about jQuery trigger() here

I think `.scroll` captures both horizontal and vertical scrolling. How would I differentiate from the two. I'm going to need both later, but for now only vertical. — , Jul 11 '16 at 19:15
I will eventually need to do the same thing, but with horizontal scroll, but the horizontal scroll is in a separate container... So yeah I also need to store it. — , Jul 11 '16 at 19:31
@Jimenemex I've updated the answer to check and store both vertical and horizontal scrolls and save only when they change. — Sinan Guclu, Jul 11 '16 at 19:48

Go back to the scroll bar position on a dynamically sized page

1 Answers1