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.
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:
This runs after each async postback completes. If you want instant scrolling instead of animation, remove behavior: "smooth":
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:
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:
Or with jQuery:
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:
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_endRequestis the usual place to trigger scrolling. - '
ScriptManager.RegisterStartupScriptis 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
- SecurityError Blocked a frame with origin from accessing a cross-origin frame
- Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
- Selecting element by data attribute with jQuery
- Self-references in object literals / initializers
- Send HTML emails with Python
- Sending command line arguments to npm script
- Sending html content in AWS SNSSimple Notification Service emails notifications
- Serializing to JSON in jQuery
.png&w=3840&q=75)
Tackling System Design Interview Problems
A short course that equips you with the skills to approach system design interviews methodically.
Start the free courseTrack 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.