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 maintainScrollPositionOnPostBack = "true"

But its not working.

Answer 1

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

Answer 2

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" />

Answer 3

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

Answer 4

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 5

<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 6

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 7

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.

Answer 8

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

Answer 9

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