Webpages jump up to the top when auto post back

Question

I am having a problem when I mark some checkbox checked in a grid view, the page itself will jump back to the top instead of staying at the same position when auto post back. Here is how I set up my grid view:

<UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
                    <ItemTemplate>
                        <!-- COLLAPSIBLE PANEL EXTENDER -->
                        <asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
                            <!-- Collapsible panel extender header -->
                            <div class="form-group" style="background-color: #ffb848; height: 30px; vertical-align: middle">
                                <div class="col-md-3">
                                    <div style="float: left; color: White; padding: 5px 5px 0 0">
                                        <asp:Label ID="lblCategory" Text='<%# DataBinder.Eval(Container.DataItem, "categoryName") %>' runat="server" />
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div style="float: right; color: White; padding: 5px 5px 0 0">
                                        <asp:Label ID="lblHeaderText1" runat="server" />
                                    </div>
                                </div>
                                <div style="clear: both"></div>
                            </div>
                        </asp:Panel>
                        <!-- Collapsible panel extender body -->
                        <asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
                            <asp:Label ID="lblBodyText1" runat="server" />
                            <!-- Grid view to show products based on each category -->
                            <asp:GridView ID="gvProduct" runat="server" AutoGenerateColumns="False" Width="998px" CellPadding="4" ForeColor="#333333" GridLines="None" ShowHeader="False" DataKeyNames="id">
                                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                                <Columns>
                                    <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                                        <ItemTemplate>
                                            <asp:CheckBox ID="cbCheckRow" runat="server" AutoPostBack="true"/>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="name" HeaderText="Name" ItemStyle-Width="650px" />
                                    <asp:BoundField DataField="inventoryQuantity" HeaderText="Total Unit" />
                                    <asp:TemplateField HeaderText="Quantity" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="200px">
                                        <ItemTemplate>
                                            <asp:TextBox ID="tbQuantity" runat="server" Width="40" Text="0" OnTextChanged="tbQuantity_TextChanged" AutoPostBack="true"/>
                                            <asp:Label ID="lblCheckAmount" runat="server" ForeColor="#a94442"></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>

                                </Columns>
                                <EditRowStyle BackColor="#999999" />
                                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                <HeaderStyle BackColor="#ffb848" ForeColor="White" />
                                <PagerStyle BackColor="#d8d8d8" ForeColor="#333333" HorizontalAlign="Left" />
                                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                                <SortedAscendingCellStyle BackColor="#E9E7E2" />
                                <SortedAscendingHeaderStyle BackColor="#506C8C" />
                                <SortedDescendingCellStyle BackColor="#FFFDF8" />
                                <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                            </asp:GridView>
                        </asp:Panel>
                        <asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
                            ExpandControlID="pHeader1" Collapsed="true" TextLabelID="lblHeaderText1" CollapsedText="Show"
                            ExpandedText="Hide" CollapsedSize="0"
                            ScrollContents="false">
                        </asp:CollapsiblePanelExtender>
                    </ItemTemplate>
                </asp:Repeater>
                </ContentTemplate>
                </UpdatePanel>

I've added the update panel. So far from my research, I know that we should use update panel to prevent the page jump up when auto post back. However, mine does not work. Any guides?

Thanks in advance.

Answer 1

You can use the MaintainScrollPositionOnPostback attribute of page Directive. See Sample below:

<%@ Page MaintainScrollPositionOnPostback="true" %>