How to maintain scroll position on autopostback?

How can I get back to the same position of a page on postback. It alwa开发者_Python百科ys seems to get to the top of the page.

I've tried using maintainScrollPositionOnPostBack = "true"

But its not working.

I've recently looked for this as well. Came up with a load of Javascript to be inserted until I found the following:

At the top of your .aspx codefile, insert the following:

 MaintainScrollPositionOnPostback="true"

so the very first sentence in your .aspx starts

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

This works just fine for me without having to add any other code for keeping scrollbar positions using updatepanels

There are a few ways I have used to set maintainScrollPositionOnPostBack. Have you tried more than one? Can you describe what is triggering the postback and which browsers you have tested? Are you using a master page?

1. You can set Page.MaintainScrollPositionOnPostBack = true; in the code behind on page load.
2. You can add it to the page declaration <%@ Page MaintainScrollPositionOnPostback="true" %>
3. You can add it in the web config file <pages maintainScrollPositionOnPostBack="true" />

You can set .Focus() onto a specific server control when your page posts back.

Are you using Google Chrome to test? I was having the same issue but started testing in IE and Firefox and it was working. I don't think Chrome supports this property. It might be a .NET Framework 3.5 issue also. It is probably fixed in .NET 4.0

Best solution for me, was to wrap the problematic controls with an update panel

<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<ContentTemplate>
dropdown controls that cause postback etc..
</ContentTemplate>
</asp:UpdatePanel>

ofcourse, you also need the

<asp:ScriptManager ID="ScriptManager1" runat="server" />

to be present inside the main form of the site.

If you have a specific anchor you want to move to you could do something like described here. Otherwise you would have to use javascript and find out how far you are from the top, save it in a hidden field or cookie, and reset the view after the page loads.

Although bbbwex's reply is correct, it actually took me a while to realize I need to place MaintainScrollPositionOnPostback="true" at both

1. Top of the ASPX page.

2. In IsPostBack

It works after I satisfy both condition.

<script type="text/javascript">    
  var xPos, yPos;
  var prm = Sys.WebForms.PageRequestManager.getInstance();

  function BeginRequestHandler(sender, args) {
    if ($get('<%=Panel1.ClientID%>') != null) {         
      xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
      yPos = $get('<%=Panel1.ClientID%>').scrollTop;
    }
 }

 function EndRequestHandler(sender, args) {
     if ($get('<%=Panel1.ClientID%>') != null) {       
       $get('<%=Panel1.ClientID%>').scrollLeft = xPos;
       $get('<%=Panel1.ClientID%>').scrollTop = yPos;
     }
 }
 prm.add_beginRequest(BeginRequestHandler);
 prm.add_endRequest(EndRequestHandler);

add the above code in ScriptManager tag and add MaintainScrollPositionOnPostback="true" in the page declaration

Note: If you have a default control defined, it will scroll to that control on post back even if Page MaintainScrollPositionOnPostback="true"

Make sure, that you do not set default button in <form id="form1" runat="server" defaultbutton="YourDefaultButton">. Remove defaultbutton="YourDefaultButton" and MaintainScrollPositionOnPostback="true" will work.

Try this. It's working for me.

<script type="text/javascript">
  window.onload = function () {
               var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
               document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;
              }
   function SetDivPosition() {
           var intY = document.getElementById("<%=scrollArea.ClientID%>").scrollTop;
           var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
           h.value = intY;
     }

  function afterpostback() {

            var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
            document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;

     }

</script> 

 <asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
 <div id="scrollArea" onscroll="SetDivPosition()"   runat="server"  style="height:225px;overflow:auto;overflow-x:hidden;"> 

if (Page.IsPostBack) {
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "CallJS", "afterpostback();", true);
}

From this question: Maintain Panel Scroll Position On Partial Postback ASP.NET

I was looking for an answer to this problem for several days, using the typical alternative of MaintainScrollPositionOnPostback and the JavaScript solutions using BeginRequestHandler and EndRequestHandler where in my case I use MasterPage.

Nothing worked, however I came up with a fairly simple solution using jQuery with BeginRequestHandler and EndRequestHandler using the same @waqas-raja algorithm:

<script type="text/javascript">

    var scrollPosition = 0;

    $(document).ready(function () {

        $(window).scroll(function (event) {
            scrollPosition = $(window).scrollTop();
        });

    });

</script>

<script type="text/javascript">

    // It is important to place this JavaScript code after ScriptManager1
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    function BeginRequestHandler(sender, args) {
        console.log('BeginRequest');
    }

    function EndRequestHandler(sender, args) {
        $(window).scrollTop(scrollPosition);
    }

    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);

</script>

The idea is to capture the position of the Scroll in a global variable each time the user moves the Scroll, in this way it is known which was the last position and when making the postback the EndRequestHandler event is entered and updated with the last position what the user marked

This worked for me in Firefox and Google Chrome :)