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

How do you prevent browser scrolling after ajax postback?

9 Answers 1090 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
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

Sort by
0
Maria Ilieva
Telerik team
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.
0
James
Top achievements
Rank 1
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.
0
Spencer
Top achievements
Rank 1
answered on 14 Aug 2010, 12:03 AM
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
0
msigman
Top achievements
Rank 2
answered on 21 Dec 2010, 04:40 PM
James, thank you for posting your solution.  It worked brilliantly for me.
0
SUNIL
Top achievements
Rank 2
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;
      }
  }

0
A
Top achievements
Rank 1
answered on 13 Oct 2016, 01:14 PM

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; });
0
Eyup
Telerik team
answered on 18 Oct 2016, 06:48 AM
Hello,

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

Regards,
Eyup
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.
0
Antony
Top achievements
Rank 1
answered on 11 Dec 2019, 05:13 AM
Thank you very much James, its worked for me greatly
0
Dana Cobb
Top achievements
Rank 1
Iron
answered on 07 Jun 2022, 07:07 PM

Thanks Sonil, worked like a charm!!!!

 

Dana

Tags
Ajax
Asked by
James
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
James
Top achievements
Rank 1
Spencer
Top achievements
Rank 1
msigman
Top achievements
Rank 2
SUNIL
Top achievements
Rank 2
A
Top achievements
Rank 1
Eyup
Telerik team
Antony
Top achievements
Rank 1
Dana Cobb
Top achievements
Rank 1
Iron
Share this question
or