Maintain div scroll position on postback

Sometimes we need to maintain the div scroll position on page postbacks. Here is how you can do it using JavaScript and Cookies.

Here I am simple using the cookie for store the current scroll position of div before postback and then set the div scroll position by reading the cookie which I nave stored in browser on page postback.

Below is the whole script for maintain the div scroll position on postback.

<script type="text/javascript">

    window.onload = MaintainDivScrollPosition;

    // Functions to save cookies

    function createCookie(name, value, days) {

        var expires;

        if (days) {

            var date = new Date();

            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

            expires = "; expires=" + date.toGMTString();

        }

        else  expires = "";

        document.cookie = name + "=" + value + expires + "; path=/";

    }

    // Functions to read cookies

    function readCookie(name) {

        var nameEQ = name + "=";

        var ca = document.cookie.split(';');

        for (var i = 0; i < ca.length; i++) {

            var c = ca[i];

            while (c.charAt(0) == ' ') c = c.substring(1, c.length);

            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);

        }

        return null;

    }

    // Functions to erase cookies

    function eraseCookie(name) {

        createCookie(name, "", -1);

    }

    // Set scroll position using Cookie

    function SetDivPosition() {

        var intY = document.getElementById("divSample").scrollTop;

        eraseCookie('DivScrollPosition');

        createCookie('DivScrollPosition', intY, 1);

    }

    // Read the saved cookie and set the scroll position of div

    function MaintainDivScrollPosition() {

        var intY = readCookie('DivScrollPosition');

        document.getElementById("divSample").scrollTop = intY;

    }

</script>

Below is the div element-

<div id="divSample" onscroll="SetDivPosition()">

        SAMPLE TEXT<br />SAMPLE TEXT<br />

        SAMPLE TEXT<br />SAMPLE TEXT<br />

        SAMPLE TEXT<br />SAMPLE TEXT<br />

        SAMPLE TEXT<br />SAMPLE TEXT<br />

        SAMPLE TEXT<br />SAMPLE TEXT<br />

        SAMPLE TEXT<br />SAMPLE TEXT<br />

        SAMPLE TEXT<br />SAMPLE TEXT<br />

        SAMPLE TEXT<br />SAMPLE TEXT<br />

        SAMPLE TEXT<br />SAMPLE TEXT<br />

</div>

 

Description of Script Functions:-

In the following function, I am getting the current scroll top position of div and then erase the previously created cookie and create the new cookie with new scroll position value. I have called this function on onscroll event of div.

function SetDivPosition() {

        var intY = document.getElementById("divSample").scrollTop;

        eraseCookie('DivScrollPosition');

        createCookie('DivScrollPosition', intY, 1);

    }

Following function is used to read the cookie which I have created in SetDivPosition() function and get the scroll position value and set it to div’s scrollTop property. I have called this function on onload event of page.

function MaintainDivScrollPosition() {

  var intY = readCookie('DivScrollPosition');

  document.getElementById("divSample").scrollTop = intY;

}

 Following function is used to create the cookie. The parameters of the function above hold the name of the cookie, the value of the cookie, and the number of days until the cookie expires.

function createCookie(name, value, days) {

        var expires;

        if (days) {

            var date = new Date();

            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

            expires = "; expires=" + date.toGMTString();

        }

        else  expires = "";

        document.cookie = name + "=" + value + expires + "; path=/";

    }

Following function is used to read the cookie. The parameters of the function above hold the name of the cookie whose value we want to get.

 function readCookie(name) {

        var nameEQ = name + "=";

        var ca = document.cookie.split(';');

        for (var i = 0; i < ca.length; i++) {

            var c = ca[i];

            while (c.charAt(0) == ' ') c = c.substring(1, c.length);

            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);

        }

        return null;

    }

Happy reading!!