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.

Andiron

Could you provide some sample code? – Aurelie

Did you try capitalizing the "m"? Does it work on a regular postback? And you are putting this in the <%@ Page %> directive, right? – Neff

Hi, thanks for asking but I guess .Focus() is working. Thanks anyway – Andiron

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

Bow

So the question specifically said this solution didn't work, and yet it was not only proposed, but accepted as the answer? – Morale

@ChristoferOlsson Looks like the issue may have been that the "m" was not capitalized as indicated comments section of the question. This worked for me. – Clayclaybank

Also, look at resetting scroll position if needed. – Clayclaybank

MaintainScrollPositionOnPostback=true; -- Dont use the quotes around true in C# – Epilate

@Epilate Quotations did not make any problem! – Corroboration

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

Adversaria

Answer 3

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

Hortatory

Thanks a lot. Any feedback on why 'maintainScrollPositionOnPostBack = "true" ' is not working? – Andiron

There is no easy answer to that question. I don't think I could investigate without having your solution, in your environment, etc. – Hortatory

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

Augustin

I am using .Net framework 2.0...facing the same issue...Is there any alternative ? – Kerchief

Answer 5

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.

Deputy

updatemode="Conditional" did it for me – Alcock

Answer 6

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

Denial

Answer 7

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.

Smitt

Answer 8

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.

Toxoid

Answer 9

<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

Mckoy

Answer 10

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

Weismann

Answer 11

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.

Leadin

Answer 12

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

Edge