AJAX
JavaScript
User Experience
Web Development
Page Navigation

Scroll to top of page after async post back

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

After an async postback, the browser does not reload the page, so the scroll position usually stays where it was. That is often correct, but sometimes the updated content or validation summary appears at the top of the page, and the user never sees it. In that case, you need to scroll explicitly after the async update finishes.

Why Async Postbacks Behave Differently

With a full page reload, the browser naturally repositions and redraws the document. With an AJAX-style partial update, only part of the DOM changes, so the existing scroll position is preserved.

This is common in older ASP.NET Web Forms applications that use UpdatePanel, but the same principle applies to any partial page update. The fix is to hook into the completion event and call a scroll API after the DOM is updated.

ASP.NET UpdatePanel Solution

If the page uses ScriptManager and UpdatePanel, the most reliable hook is the endRequest event from PageRequestManager:

html
1<script>
2  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
3    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
4  });
5</script>

This runs after each async postback completes. If you want instant scrolling instead of animation, remove behavior: "smooth":

html
1<script>
2  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
3    window.scrollTo(0, 0);
4  });
5</script>

That is usually enough when the page should always jump to the top after any partial update.

Scrolling Only for Specific Actions

Sometimes scrolling after every async postback is too aggressive. For example, a paging control or inline grid update may not need it. In that case, register the script only for the specific server action that needs the jump:

csharp
1protected void SaveButton_Click(object sender, EventArgs e)
2{
3    StatusLabel.Text = "Saved successfully";
4    ScriptManager.RegisterStartupScript(
5        this,
6        GetType(),
7        "scrollTop",
8        "window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });",
9        true
10    );
11}

This keeps the behavior tied to a specific event instead of every update panel refresh.

jQuery and Modern JavaScript Variants

If the page is not Web Forms specific, the same behavior is easy with plain JavaScript:

javascript
function afterPartialUpdate() {
  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
}

Or with jQuery:

javascript
$("html, body").animate({ scrollTop: 0 }, 250);

The important detail is timing. Run the scroll after the updated markup is in the DOM, not before the request starts.

UX Considerations

Do not scroll to the top just because you can. It is useful when:

  • a validation summary appears near the top
  • a success or error banner is rendered above the fold
  • the update replaces the whole result region

It is disruptive when:

  • the user is editing lower fields in a long form
  • only a small section changed in place
  • the page updates frequently

A better alternative in some cases is to scroll to the exact updated section or validation block instead of the top of the page.

Scrolling to a Specific Element

If the page has a message box or summary panel, targeting that element can be better than hard-jumping to the document start:

javascript
1const summary = document.getElementById("validation-summary");
2if (summary) {
3  summary.scrollIntoView({ behavior: "smooth", block: "start" });
4}

This gives the user context without moving farther than necessary.

Common Pitfalls

One common mistake is binding the scroll code before the ASP.NET AJAX framework is ready. If PageRequestManager is not available yet, the script throws an error.

Another mistake is scrolling on request start instead of request end. That can move the user before the updated content exists.

A third issue is forcing every async action to jump to the top. That often feels broken rather than helpful.

Summary

  • Async postbacks preserve scroll position unless you change it yourself.
  • In ASP.NET Web Forms, PageRequestManager.add_endRequest is the usual place to trigger scrolling.
  • 'ScriptManager.RegisterStartupScript is useful when only specific async actions should scroll.'
  • Scroll after the DOM update, not before the request.
  • Consider scrolling to a target element instead of always jumping to the top of the page.

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.