This is a migrated thread and some comments may be shown as answers.

How do you prevent browser scrolling after ajax postback?

9 Answers 1859 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

James asked on 03 Jun 2010, 11:09 PM

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?

9 Answers, 1 is accepted

answered on 08 Jun 2010, 03:53 PM

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.

answered on 08 Jun 2010, 05:05 PM

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.

answered on 20 Oct 2015, 06:51 PM

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;

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

How do you prevent browser scrolling after ajax postback?

9 Answers, 1 is accepted