How to keep whole page scroll position after asynchronous postback

i am using asp.net 4.0 iis 7.5 microsoft visual studio 2010

what i want is keep whole page (browser) scroll position (not a div or panel) when asynchronous postback happened (update panel)

how can i do this

actually i had a function which can keep div scroll bar position after postback like this

       <script type="text/javascript">
        var xPos, yPos;
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);
        function BeginRequestHandler(sender, args) {
            xPos = document.getElementById('Main').scrollLeft;
            yPos = document.getElementById('Main').scrollTop;
        }
        function EndRequestHandler(sender, args) {
            document.getElementById('Main').scrollLeft = xPos;
            document.getElementById('Main').scrollTop = yPos;
        }
    </script>

bu i could not find browser scroll bar id to get its values to get with document.getElementById

thanks for answers

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

asp.net has @page directive property called MaintainScrollPositionOnPostBack

hope this will help

Method 2

I found it here :http://forums.asp.net/t/1300961.aspx

just add it right after script manager. it works for me in all browsers

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(beginRequest);
    function beginRequest()
    {
        prm._scrollPosition = null;
    }
</script>

Method 3

You can do it the client way :

$(document).ready(function () {
    $(window).on('beforeunload', function () {
        document.cookie = "keepscroll=" + $(window).scrollTop();
    });
    var cs = document.cookie ? document.cookie.split(';') : [];
    var i = 0, cslen = cs.length;
    for (; i < cs.length; i++) {
        var c = cs[i].split('=');
        if (c[0].trim() == "keepscroll") {
            $(window).scrollTop(parseInt(c[1]));
            break;
        }
    }
});

If you are not jQuery’s friend then you could try something like :

window.onbeforeunload = function () {
    document.cookie = "keepscroll=" + document.body.scrollTop;
};
var keepscroll = window.setTimeout(function () {
    var cs = document.cookie ? document.cookie.split(';') : [];
    var i = 0, cslen = cs.length;
    for (; i < cs.length; i++) {
        var c = cs[i].split('=');
        if (c[0].trim() == "keepscroll") {
            window.scrollTo(0, parseInt(c[1]));
            break;
        }
    }
    window.clearTimeout(keepscroll);
    keepscroll = null;
}, 100);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0