The Disturbed Buddha

Simple Observations of a Self-proclaimed Novice

Maintain Scroll Position after Asynchronous Postback

Do you want to maintain the scroll position of a GridView, Div, Panel, or whatever that is inside of an UpdatePanel after an asynchronous postback?  Normally, if the updatepanel posts back, the item will scroll back to the top because it has been reloaded.  What you need to do is “remember” where the item was scrolled to and jump back to there after the postback.  Place the following script after the ScriptManager on your page.  And since the _endRequest event of the PageRequestManager happens before the page is rendered, you’ll never even see your item move!

<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 = $get('scrollDiv').scrollLeft; 
        yPos = $get('scrollDiv').scrollTop; 
    } 
    function EndRequestHandler(sender, args) { 
        $get('scrollDiv').scrollLeft = xPos; 
        $get('scrollDiv').scrollTop = yPos; 
    } 
</script>

December 3, 2007 Posted by | Ajax, ASP.NET, Javascript, Web Development | 35 Comments