Maintain vertical scroll position

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.

41 thoughts on “Maintain vertical scroll position”

  1. @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:

    let scroll = document.body.scrollTop;
    

    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.

Leave a Comment