How to maintain scroll position on autopostback?

Question

How can I get back to the same position of a page on postback. It always seems to get to the top of the page.

I\'ve tried using maintainSc

Answer 1

<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

Answer 2

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 :)

Answer 3

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

Answer 4

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);
}

Answer 5

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.

Answer 6

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