How do you prevent browser scrolling after ajax postback?

9 posts, 0 answers
  1. James
    James avatar
    35 posts
    Member since:
    Apr 2010

    Posted 03 Jun 2010 Link to this post

    I have a web application that is using a RadAjaxManager to update some sections of the page automatically after the page loads - for performance so I can load the main content right away and additional content a couple seconds later.  However, I noticed that after the ajax call returns the browser window scrolls to near the top of the page.  This creates a disorienting user experience, especially if the user has scrolled down a little ways before the ajax call returns.

    I created a sample application to demonstrate this issue.

    Here is the aspx code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TelerikTest._Default" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
    <html xmlns="" > 
    <head runat="server">  
        <title>Untitled Page</title> 
        <form id="form1" runat="server">  
            <telerik:RadScriptManager ID="scriptManager" runat="server"></telerik:RadScriptManager> 
            <telerik:RadAjaxManager ID="ajaxManager" runat="server">  
                    <telerik:AjaxSetting AjaxControlID="divRight">  
                            <telerik:AjaxUpdatedControl ControlID="divRight" /> 
                    <telerik:AjaxSetting AjaxControlID="divLeft">  
                            <telerik:AjaxUpdatedControl ControlID="divLeft" /> 
                             <div id="divLeft" runat="server" style="height:2000px; width:400px; border:solid 1px black;">  
                                <asp:Button ID="btn1" runat="server" Text="Post Back" onclick="btn_Click" /> 
                            <div id="divRight" runat="server" style="height:200px; width:400px; border:solid 1px black;">  
                                <asp:Button ID="btn2" runat="server" Text="Post Back" onclick="btn_Click" /> 
                            <div style="height:1800px; width:400px; border:solid 1px blue;"></div> 

    The code behind:
    using System;  
    using System.Collections;  
    using System.Configuration;  
    using System.Data;  
    using System.Web;  
    using System.Web.Security;  
    using System.Web.UI;  
    using System.Web.UI.HtmlControls;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.WebControls.WebParts;  
    namespace TelerikTest  
        public partial class _Default : System.Web.UI.Page  
            protected void Page_Load(object sender, EventArgs e)  
            protected void btn_Click(object sender, EventArgs e)  

    This page has two buttons on it that do ajax posts and sleep for 5 seconds.  When you click on either one, immediately scroll down the page.  Once the ajax call returns, the browser window returns to the top of the page.  Is there a way to prevent this?

  2. Maria Ilieva
    Maria Ilieva avatar
    4017 posts

    Posted 08 Jun 2010 Link to this post

    Hello James,

    The presented behavior is actually expected for the MS Ajax Framework and this could be replicated with regu8lar asp UpdatePanels. If you initiate Ajax request and scroll during this request the scroll will be maintain to the top position.
    If you just click on a button and no scroll is presented during this request the scroll will be kept on the correct position.

    Maria Ilieva
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. James
    James avatar
    35 posts
    Member since:
    Apr 2010

    Posted 08 Jun 2010 Link to this post

    Well, I'm not sure how comforting it is to know that this is by design.  I can understand that many ajax post back scenarios would want to have the scroll position returned to where the ajax event occured but there are othere scenarios where "background" or updates on a timer occur where this automatic scrolling needs to be turned off.

    Unfortunately, your post doesn't really answer my question of how to stop this behavior.

    Fortunately, I did find a way to prevent it and am posting it here in case anyone else has the same problem.  It appears that the PageRequestManager is making a call to a js method called scrollTo() on the scripts load complete event.  If you add your own scrollTo() method, your method will be called instead of the one ms ajax is using.  Adding the method below fixed the issue for me:

    // Prevent MS Ajax from changing scroll position after ajax postback.  
    function scrollTo(x,y) {}  

    Hope this helps others.
  4. Spencer
    Spencer avatar
    1 posts
    Member since:
    Aug 2010

    Posted 13 Aug 2010 Link to this post

    Another solution is to prevent ASP from wanting to scroll:

    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(function() {
            prm._scrollPosition = null;

  5. msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 21 Dec 2010 Link to this post

    James, thank you for posting your solution.  It worked brilliantly for me.
  6. SUNIL
    SUNIL avatar
    237 posts
    Member since:
    Jan 2004

    Posted 20 Oct 2015 Link to this post

    This is an old thread, but if you want to restore scroll position after ajax post back you can subscribe to client-side events of RequestStart and ResponseEnd as in code snippet below. In this code snippet the scroll position of window before ajax is being saved to x and y, which are global variables, and then when ajax completes the window is being scrolled to this saved scroll position.

    function RequestStart(sender, args) {
           x = window.scrollX || window.pageXOffset || document.body.scrollLeft;
           y = window.scrollY || window.pageYOffset || document.body.scrollTop;
      function ResponseEnd(sender, args) {
               window.scrollTo(x, y);
              x = null;
              y = null;

  7. A
    A avatar
    41 posts
    Member since:
    Nov 2015

    Posted 13 Oct 2016 in reply to SUNIL Link to this post

    Just wanted to add my two cents to this thread by suggesting a non-intrusive version of Spencer's excellent solution:

    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (me) { me._scrollPosition = null; });
  8. Eyup
    Eyup avatar
    4072 posts

    Posted 18 Oct 2016 Link to this post


    Thank you for sharing your specific approach and experience with our community.
    I hope it will prove helpful to other developers as well.

    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  9. Antony
    Antony avatar
    1 posts
    Member since:
    Dec 2019

    Posted 10 Dec 2019 in reply to James Link to this post

    Thank you very much James, its worked for me greatly
Back to Top