Javascript – Scroll to top of page after async post back

asp.netasynchronouscode-behindjavascript

So I need to scroll to the top of the page after an async post back in an asp.net update panel.

The code I used was this:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestEventHandler);
function EndRequestEventHandler(sender, args)
{
    scrollTo(0,0);
}

However, I only want this to be run when I click on a certain button which causes the async postback.

How do I wire this event up in my code behind button event?

Any help would be appreacited, thanks!

Best Answer

My quest for a solution is finally over. This question was part of the help, and the rest I found here.

Had to override ASP.NET Ajax's behaviour of memorizing the scroll position:

<script type="text/javascript"> 

var manager = Sys.WebForms.PageRequestManager.getInstance(); 

manager.add_beginRequest(beginRequest); 
function beginRequest() 
{ 
    manager._scrollPosition = null; 
} 
</script>

And then use the bit of code in the answer here, on the codebehind of the page I wanted to scroll to the top:

ScriptManager.RegisterStartupScript(this, typeof(MyControl), "someText", "window.scrollTo(0, 0)", true);

Related Solutions

Javascript – Smooth scroll to top of page after an asp.net ajax postback

You can just use jQuery and scrollTo: http://demos.flesler.com/jquery/scrollTo/

Or just write the animation yourself:

$('body').animate({ scrollTop: 0 }, 1000);

C# – Reset scroll position after Async postback – ASP.NET

As you're using UpdatePanels you're going to need to hook into the ASP.NET AJAX PageRequestManager

You'll need to add a method to the endRequest event hooks that are:

Raised after an asynchronous postback is finished and control has been returned to the browser.

So you'd have something like:

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(pageLoaded);

  function pageLoaded(sender, args) {
     window.scrollTo(0,0);
  }
</script>

Which will force the browser to scroll back to the top of the page once an update request has completed.

There are other events you could hook into instead of course:

beginRequest // Raised before the request is sent
initializeRequest // Raised as the request is initialised (good for cancelling)
pageLoaded // Raised once the request has returned, and content is loaded
pageLoading // Raised once the request has returned, and before content is loaded

The beauty of asynchronous post-backs is that the page will maintain the scroll height without you having to set MaintainScrollPosition, as there is no "full page reload" happening, in this case you actually want that effect to happen, so you will need to manually create it.

Edit to respond to updated question

Ok, so if you need to only reset the postion on certain button presses you'll need to do something like this:

Start by hooking into the BeginRequest instead/as well:

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

This is because in the args parameter you get access to:

args.get_postBackElement().id

Which will tell you the id of the button that started the whole event - you can then either check the value here, and move the page, or store it in a variable, and query it in the end request - being aware of race conditions, etc where the user clicks another button before your original update completes.

That should get you going with any luck - there's quite a few examples around this on Working with PageRequestManager Events

Best Answer

Related Solutions

Javascript – Smooth scroll to top of page after an asp.net ajax postback

C# – Reset scroll position after Async postback – ASP.NET

Related Topic