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


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