Reset scroll position after Async postback - ASP.NET

Question

What is the best way to reset the scroll position to the top of page after the an asynchronous postback?

The asynchronous postback is initiated from a ASP.NET GridView CommandField column and the ASP.NET update panel Update method is called in the GridView OnRowCommand.

My current application is an ASP.NET 3.5 web site.

EDIT: I have received excellent feedback from everyone, and I ended using the PageRequestManager method in a script tag, but my next question is:

How do I configure it to only execute when the user clicks the ASP.NET CommandField in my GridView control? I have other buttons on the page that perform an asynchronous postback that I do not want to scroll to the top of the page.

EDIT 1: I have developed a solution where I do not need to use the PageRequestManager. See my follow up answer for solution.

Answer 1

Have you set the page property MaintainScrollPosition? Not sure if that would be any different if you do an Async Postback or not.

Edit: One thing you could attempt is to set focus on a particular item near the top of your page, that may help and be a dirty work around.

Answer 2

Are you using asp.net AJAX? If so there are two very useful events in the client libraries beginRequest and endRequest, one of the problems with partial/async postbacks, is that the general page hasnt got a clue what you are doing. the begin and endrequest events will allow you to maintain scroll position at the client, you could have a var in js that is set to the scroll position on beginrequest, then on end request you can reset whichever element's scrollTop you require.. i'm sure ive seen this done before but cant find a link. ill post if i find an example

Answer 3

Here is the following solution I developed based on this source

ASP.NET Webform

<script language="javascript" type="text/javascript">
   function SetScrollEvent() {
      window.scrollTo(0,0);
   }
</script> 

<asp:GridView id="MyGridView" runat="server" OnRowDataBound="MyGridView_OnRowDataBound">
    <Columns>
        <asp:CommandField ButtonType="Link" ShowEditButton="true" />
    </Columns>
</asp:GridView>

ASP.NET Webform code behind

protected void MyGridView_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType.Equals(DataControlRowType.DataRow))
    {
        foreach (DataControlFieldCell cell in e.Row.Cells)
        {
            foreach(Control control in cell.Controls)
            {
                LinkButton lb = control as LinkButton;

                if (lb != null && lb.CommandName == "Edit")
                    lb.Attributes.Add("onclick", "SetScrollEvent();");
            }
        }
    }
}

Answer 4

I use a hidden Input called hScrollTop that I set before the asp.net Form is posted back. Then, when the page loads, it sets the scrollTop according to the hidden input's value.

Try this code on a new page.

<div style="height:500px"></div>

<form id="Form1" runat=server onsubmit="javascript:saveScrollTop();">
    <input type=submit value="Submit" runat=server>
    <input type="hidden" id="hScrollTop" runat=server>
</form>

<div style="height:1000px"></div>

<script language="javascript">
    function saveScrollTop() {
     document.getElementById("<%= hScrollTop.ClientID %>").value = document.body.scrollTop;
     return true;
    }

    window.onload = function() {
     document.body.scrollTop = document.getElementById("<%= hScrollTop.ClientID %>").value;
    }

</script>

Answer 5

taken from this tutorial:

http://aspnet.4guysfromrolla.com/articles/111407-1.aspx

We set MaintainScrollPositionOnPostback=true

Then if we need to reset scroll position call the method:

Private Sub ResetScrollPosition()
If Not ClientScript.IsClientScriptBlockRegistered(Me.GetType(), "CreateResetScrollPosition") Then
   'Create the ResetScrollPosition() function
   ClientScript.RegisterClientScriptBlock(Me.GetType(), "CreateResetScrollPosition", _
                    "function ResetScrollPosition() {" & vbCrLf & _
                    " var scrollX = document.getElementById('__SCROLLPOSITIONX');" & vbCrLf & _
                    " var scrollY = document.getElementById('__SCROLLPOSITIONY');" & vbCrLf & _
                    " if (scrollX && scrollY) {" & vbCrLf & _
                    "    scrollX.value = 0;" & vbCrLf & _
                    "    scrollY.value = 0;" & vbCrLf & _
                    " }" & vbCrLf & _
                    "}", True)

   'Add the call to the ResetScrollPosition() function
   ClientScript.RegisterStartupScript(Me.GetType(), "CallResetScrollPosition", "ResetScrollPosition();", True)
End If
End Sub

Answer 6

Here is the perfect solution to reset scroll bar position to TOP in AJAX

Client Side Code

function ResetScrollPosition()
{
    setTimeout("window.scrollTo(0,0)", 0);
}

Server Side Code

ScriptManager.RegisterStartupScript(Page, this.GetType(), "ScrollPage", "ResetScrollPosition();", true);

Only,window.scrollTo(0,0) will not work. Ajax will take precedence in this case so you have to use setTimeout function with that.