How to Maintain Scroll position after asynchronous postback in asp.net with in the nested master?

Question

I have a child page with the nested master means 2 master pages inherit one from another and in that child page I have all user controls only.

So in my case I have to maintain a scroll position of a child page after async post back of user control list box.

I have tried:

MaintainScrollPositionOnPostback="true" 

with in page directive and js code

<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("<%=Panel1.ClientID %>").scrollLeft;
           yPos = document.getElementById("<%=Panel1.ClientID %>").scrollTop;
       }
       function EndRequestHandler(sender, args) {
           document.getElementById("<%=Panel1.ClientID %>").scrollLeft = xPos;
           document.getElementById("<%=Panel1.ClientID %>").scrollTop = yPos;
       }
</script>

For panel and for div and update panel..these all are fails completely, why because if child page is getting post back means the related master pages also post backed..but I don't know how to maintain the scroll position..

please Try to help me as soon as possible..

Thanks guys

Answer 1

Assuming i have an

<asp:hiddenfield id="hid" runat="server"/>     
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);
        function BeginRequestHandler(sender, args) {
        xPos = document.getElementById("<%=Panel1.ClientID %>").scrollLeft;
        yPos = document.getElementById("<%=Panel1.ClientID %>").scrollTop;
        var h = document.getElementById("<%=hid.ClientID %>");
        h.value = xPos.toString() + "_" + yPos.toString();  
        }
        function EndRequestHandler(sender, args) {
        var val = document.getElementById("<%=hid.ClientID %>").value.split('_');
        xPos = parseFloat(val[0]);
        yPos = parseFloat(val[1]);
        document.getElementById("<%=Panel1.ClientID %>").scrollLeft = xPos;
        document.getElementById("<%=Panel1.ClientID %>").scrollTop = yPos;
    }
</ asp:hiddenfield>

thanks

Answer 2

If you like client code and jQuery :

$(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 only like client code :

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);