AJAX How-to: Scroll to the top of a Page when clicking on only the Pager Controls in DataView
Today I figured out how to Scroll back to the top of a Page when one of my users click on the Pager Controls at the bottom of a Page. I wanted all of the other AJAX postbacks to not scroll, but I did want the postbacks to scroll to the top when the pager controls were clicked. The pager control's client ID's are not set, so the postbackElement ID is set equal to the DataView, so knowing that information you can use the PageRequestManager to scroll to the top only if the the pager controls are clicked. (This works for both the Top and Bottom Pager controls):
<script type="text/javascript" language="javascript">
var postbackElement;
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded)
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args)
{
if (typeof(postbackElement) === "undefined") {
return;
}
if ((postbackElement.id) === "ctl00_C1_JobsGridView") {
window.scrollTo(0,0);
}
}
</script>