This post describes how to maintain vertical scroll position after form submission or clicking on link. Script will read vertical scroll position and append scroll value to URL. After page is loaded, JavaScript function will search for scroll parameter in URL and set the scroll position.
Demo first. Please try to scroll a bit down and click on redips.scroll() link. Reloaded page should stay at the same vertical position. VoilĂ ! And the source:
// define container var redips = {}; // append scroll parameter to URL or return scroll value redips.scroll = function (url) { let scroll, q; // DOM compliant if (document.body && document.body.scrollTop) { scroll = document.body.scrollTop; } // old - Netscape compliant else if (typeof (window.pageYOffset) === 'number') { scroll = window.pageYOffset; } // very very old - IE6 standards compliant mode else if (document.documentElement && document.documentElement.scrollTop) { scroll = document.documentElement.scrollTop; } // when vertical scroll bar is on the top else { scroll = 0; } // if input parameter does not exist then return scroll value if (url === undefined) { return scroll; } // else append scroll parameter to URL else { // set "?" or "&" before scroll parameter q = url.indexOf('?') === -1 ? '?' : '&'; // load page with scroll position parameter window.location.href = url + q + 'scroll=' + scroll; } }; // set scroll position if URL contains scroll=nnn parameter redips.setScrollOnLoad = function () { // get query string parameter with "?" let search = window.location.search, matches; // if query string exists if (search) { // find scroll parameter in query string matches = /scroll=(\d+)/.exec(search); // jump to scroll position if scroll parameter exists if (matches) { window.scrollTo(0, matches[1]); } } }; // add onload event listener if (window.addEventListener) { window.addEventListener('load', redips.setScrollOnLoad, false); } else if (window.attachEvent) { window.attachEvent('onload', redips.setScrollOnLoad); }
redips.scroll() link shows how to call this page with some parameters and maintain scroll position. After clicking on link, you will see example parameters followed by scroll position parameter. Please try to change scroll value directly in the address line and press enter. Page should take vertical position according to the changed value.
All source code and examples are prepared in redips11.tar.gz package.
@SI – In case with form and/or POST method, it’s needed to manually prepare initial scroll value. It can be read with following line:
Next step is to send “scroll” value to backend page with other form parameters and send it back in respond to browser. This way setScrollOnLoad() method will be able to read “scroll={x}” from URL and set vertical scroll position.