How to reset scroll position after an UpdatePanel post back?

If you use ASP.NET UpdatePanels, most of the time you want to maintain the window scroll position but there are occasions when you want the page to scroll back to the top or to a specific control. For example, when you have a paging control you should return the user to the top of the list.

It is quite simple to accomplish this using the ScriptManager's registerStartupScript method.

To reset the scroll position (back to top), add the following code to your postback event:

ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), "ScrollTop", "setTimeout('window.scrollTo(0,0)', 0);", true);

If you use jQuery you can use the following code to scroll to the top of a specific element (with the ID mydiv in this example), no plugin required:

ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), "ScrollTop", "setTimeout(\"$('html, body').scrollTop($('#mydiv').offset().top)\", 0);", true);

Using jQuery opens up many other options, including animating the scroll position.

NB. In the above examples change UpdatePanel1 to the ID of your UpdatePanel.

If this tip helped you please share on Facebook, Twitter or Google+.