Maintain scroll position asp.net partial rendering with multiple Updatepanels

Question

I cannot maintain the scroll position of my page having Asynchronous partial rendering.

Here is a sample of my aspx page:

<%@ Page Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="Page.aspx.cs" Inherits="Page_Page" MaintainScrollPositionOnPostback="true"%>




<asp:Content ID="ContentCo" ContentPlaceHolderID="Cph" runat="Server">



  <asp:UpdatePanel ID="UpdatePanel1" runat="server"  UpdateMode="Conditional" ChildrenAsTriggers="false"> 
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"/>
            </Triggers>
            <ContentTemplate> 

            </ContentTemplate>
        </asp:UpdatePanel>
      <asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="1"></asp:Timer>

        <asp:UpdatePanel ID="UpdatePanel2" runat="server"  UpdateMode="Conditional" ChildrenAsTriggers="false">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick"/>
            </Triggers>
            <ContentTemplate>

            </ContentTemplate>
        </asp:UpdatePanel>
     <asp:Timer ID="Timer2" runat="server" OnTick="Timer2_Tick"  Interval="1"></asp:Timer>



   <asp:UpdatePanel ID="UpdatePanel3" runat="server"  UpdateMode="Conditional" ChildrenAsTriggers="false">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer3" EventName="Tick"/>
            </Triggers>
            <ContentTemplate>

            </ContentTemplate>
        </asp:UpdatePanel>
    <asp:Timer ID="Timer3" runat="server" OnTick="Timer3_Tick" Interval="1"></asp:Timer>


     <asp:UpdatePanel ID="UpdatePanel4" runat="server"  UpdateMode="Conditional" ChildrenAsTriggers="false">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer4" EventName="Tick"/>
            </Triggers>
            <ContentTemplate>

            </ContentTemplate>
        </asp:UpdatePanel>
    <asp:Timer ID="Timer4" runat="server" OnTick="Timer4_Tick" Interval="1"></asp:Timer>



    <asp:UpdatePanel ID="UpdatePanel5" runat="server"  UpdateMode="Conditional" ChildrenAsTriggers="false">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer5" EventName="Tick"/>
            </Triggers>
            <ContentTemplate>

            </ContentTemplate>
        </asp:UpdatePanel>
    <asp:Timer ID="Timer5" runat="server" OnTick="Timer5_Tick" Interval="1"></asp:Timer>


     <asp:UpdatePanel ID="UpdatePanel6" runat="server"  UpdateMode="Conditional" ChildrenAsTriggers="false">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer6" EventName="Tick"/>
            </Triggers>
            <ContentTemplate>

            </ContentTemplate>
        </asp:UpdatePanel>
    <asp:Timer ID="Timer6" runat="server" OnTick="Timer6_Tick" Interval="1"></asp:Timer>


    </asp:Content>

and I add all the controls in aspx.cs for each UpdatePanel like:

var us = LoadControl("~/Controls/Control1.ascx");
 this.Controls.Add(us1);

The Asynchronously Partial rendering works, but each time that a control is rendering it goes at the top of the page, How can i fix that issue?

Answer 1

I think I had the same issue and resolved by overwriting the javascript scrollTo function. I inserted the below in the page

<script type="text/javascript">
    window.scrollTo = function () { }
</script>