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

Leave a comment

Please note that we won't show your email to others, or use it for sending unwanted emails. We will only use it to render your Gravatar image and to validate you as a real person.