How can I retain the scroll position of a scrollable area when pressing back button?
During page unload, get the scroll position and store it in local storage. Then during page load, check local storage and set that scroll position. Assuming you have a div element with id element
. In case it's for the page, please change the selector :)
$(function() {
$(window).unload(function() {
var scrollPosition = $("div#element").scrollTop();
localStorage.setItem("scrollPosition", scrollPosition);
});
if(localStorage.scrollPosition) {
$("div#element").scrollTop(localStorage.getItem("scrollPosition"));
}
});
Take User Back to Where They Scrolled to on previous page when clicking Browser Back Button
If the content is loaded after page "load" event firing, then the back button would not take you back to the position you were. Because the browser scrolls before the 'load' event.
To make the browser remember the scroll position in this case, you have to store the scroll position and status (what content have been loaded) somewhere before navigating away. Either in the cookie, or in the url hash.
If pageA is just a static page without dynamic content (loaded after 'load' event, the browser should remember the scroll position when you go back.
For dynamic content, there at least includes two parts. One is recovering the page status when click "Back" button, so all the dynamic content is loaded, some expander are expanded or collapsed. The other is scroll to there.
The first part depends on how the page is implemented. The 2nd part you can put the scroll top into the cookie when page doing onUnload. For example
$(window).unload(function() {$.cookie('scrollTop',$(window).scrollTop());});
Related Topics
How to Get All the Applied Styles of an Element by Just Giving Its Id
How to Detect Overflow in Div Element
IE9: Why Setting "-Ms-Transform" Works from CSS, But Not with Jquery.Css()
Bootstrap Collapsed Menu Links Not Working on Mobile Devices
How to Use CSSstylesheet.Insertrule() Properly
Call Swift Function with JavaScript Using Uiwebview
Fast Stable Sorting Algorithm Implementation in JavaScript
How to Define Two Angular Apps/Modules in One Page
Babel-Loader Jsx Syntaxerror: Unexpected Token
How to Add "Href" Attribute to a Link Dynamically Using JavaScript
How to Change the Background Image of Div Using JavaScript
Bootstrap and Jqueryui Conflict
Change CSS Rule in Class Using Jquery
Smoothly Stop CSS Keyframe Animation