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?

Answer 1

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