How do you prevent browser scrolling after ajax postback?

5 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <telerik:RadScriptManager ID="scriptManager" runat="server"></telerik:RadScriptManager> 
            <telerik:RadAjaxManager ID="ajaxManager" runat="server">  
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="divRight">  
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="divRight" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                    <telerik:AjaxSetting AjaxControlID="divLeft">  
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="divLeft" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
            <div> 
                <table> 
                    <tr> 
                        <td> 
                             <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> 
                        </td> 
                        <td> 
                            <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> 
                            <div style="height:1800px; width:400px; border:solid 1px blue;"></div> 
                        </td> 
                    </tr> 
                </table> 
                 
            </div> 
        </form> 
    </body> 
    </html> 
     

    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)  
            {  
                System.Threading.Thread.Sleep(5000);     
            }  
        }  
    }  
     


    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
    Admin
    Maria Ilieva avatar
    3223 posts
    Member since:
    Sep 2012

    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.

    Greetings,
    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;
        });
     
    </script>

    from: http://forums.asp.net/p/1047815/2513464.aspx

  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.

Back to Top