ASP.Net Ajax - Maintain Scroll Position of DIV on Async PostBack

Posted by Blake on 6/25/2009
)

I had written a page recently that resized a div when an Async PostBack occured (basically, the scroll bar wouldn’t be active unless I did for whatever reason.. however, when I resized the DIV tag it would always lose it’s scroll position and go to the top which was an undesirable consequence). To get around this, I created some JavaScript that would get the scroll position of my DIV tag in question and then reset it after the PostBack was complete.

Note: This JavaScript MUST be placed after your ScriptManager tag in the page, otherwise the declaration of the prm variable will fail. In this code, I’m saving the scroll position of a DIV tag with the ID of ‘searchResults’ and I’m also calling a resize() function, you’ll want to remove that line for your purposes:

    // Is is absolutely necessary that this JavaScript be on the page below the ScriptManager tag.
    // Otherwise, the Sys object won't be available and an exception will occur.
    var scrollTop;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    function InitializeRequest(sender, args) {
        scrollTop = document.getElementById('searchResults').scrollTop;
    }

    function EndRequest(sender, args) {
        resize();
        document.getElementById('searchResults').scrollTop = scrollTop;
    }