Keep page position on postback

Question

I have a problem:

<asp:Label ID="Label1" runat="server" Text="Name" CssClass="left"></asp:Label>

    <asp:LinkButton ID="LinkEdit" runat="server" CssClass="right_bottom" 
        onclick="LinkEdit_Click" Height="16px">edit</asp:LinkButton>
    <asp:LinkButton ID="Linkhide" runat="server" CssClass="right_bottom" 
        onclick="Linkhide_Click" Visible="False" hide</asp:LinkButton>
    <br />
    <hr style="width: 740px; height: -6px; margin-left: 0px; " />
    <asp:Label ID="labelFullname" runat="server" Text="Full Name" CssClass="left_top"></asp:Label>
    <asp:Label ID="labelNameDisplay" runat="server" Text="Put name here" CssClass="right_top"></asp:Label>

    <br />
    <asp:Panel ID="panelName" runat="server" Height="240px" Visible="False" CssClass="panel_top"
        style="text-align: left;">
        
        <asp:Label ID="Label8" runat="server" CssClass="left" Text="Please allow 24 hours for name changes to take effect."></asp:Label>
    <div align="center"><br />
    <br />
    <table>
       <tr>
       <td class="label_new">
         <asp:Label ID="Label4" runat="server" Text="Full Name:" ToolTip="Name Displayed"></asp:Label>
         </td>
         <td align="left">
          
          <asp:DropDownList ID="DropDownList1"  runat="server" BorderStyle="Groove" 
                 Font-Names="Segoe UI,Tahoma,Verdana,Arial,Times" Font-Size="100%" Height="25px" 
          valign="middle" Width="250px">
              <asp:ListItem></asp:ListItem>
              <asp:ListItem></asp:ListItem>
              <asp:ListItem></asp:ListItem>
          </asp:DropDownList>
       </td>
  </tr>
  

   <tr>
       <td class="label_new">
         <asp:Label ID="Label2" runat="server" Text="First Name:"></asp:Label>
         </td>
         <td align="left">
         <asp:TextBox ID="txtFirstName" runat="server" BorderStyle="Groove" Font-Names="Segoe UI,Tahoma,Verdana,Arial,Times" Font-Size="100%" Height="20px" 
          valign="middle" Width="242px"></asp:TextBox>
       </td>
  </tr>

     <tr>
       <td class="label_new">
         <asp:Label ID="Label9" runat="server" Text="Middle Name:"></asp:Label>
         </td>
         <td align="left">
         <asp:TextBox ID="txtMiddleName" runat="server" BorderStyle="Groove" Font-Names="Segoe UI,Tahoma,Verdana,Arial,Times" Font-Size="100%" Height="20px" 
          valign="middle" Width="242px" onfocus="if (this.value == 'optional') {   this.value='';  this.style.color='black';}" />
       </td>
  </tr>

     <tr>
       <td class="label_new">
         <asp:Label ID="Label10" runat="server" Text="Last Name:"></asp:Label>
         </td>
         <td align="left">
         <asp:TextBox ID="txtLastName" runat="server" BorderStyle="Groove" Font-Names="Segoe UI,Tahoma,Verdana,Arial,Times" Font-Size="100%" Height="20px" 
          valign="middle" Width="242px"></asp:TextBox>
       </td>
  </tr>
  <tr>
  <td colspan="2">
      <asp:Button ID="btnSaveChanges" runat="server" Text="Save Changes" 
          onclick="btnSaveChanges_Click" />
  </td>
  </tr>
    </table>
    </div>
   
    </asp:Panel>

I have 4 panels in this format just like ACCOUNT SETTINGS on facebook. My problem here is when I show the panel it just jump to the top of the page.

I would like to do it just as the way facebook is doing. Click and be on at the same position of where you clicked.

Answer 1

You can set the MaintainScrollPositionOnPostback property on your page:

Page.MaintainScrollPositionOnPostback = true;

or put it in the page declaration

<%@ Page MaintainScrollPositionOnPostback="true" %> 

Answer 2

I'm not entirely sure I what you are asking for. Facebook uses a lot of ajax style callbacks which means that the page doesn't reload using asp .net style postbacks. If you're just starting out I'd recommend you trying placing your code into an Ajax .Net UpdatePanel whilst you learn the details of Ajax / JSON / XMLHttpRequest etc.

If you're simply looking to make sure the browser window remains at the same scrollbar position after a postback then set the page to use the MaintainScrollPositionOnPostback="true" directive.