Prevent page scrolling after postback and maintain position

I am working with adding up user’s scores based on their checks in a CheckBoxList. Every time a user checks a box, a value, X, is added to the overall score. When a user unchecks a box, a value, X, is subtracted from the overall score. No problems here.

The problem that I am having is that using the AutoPostback option in the CheckBoxList properties forces the page to load back to the top instead of staying where the user was situated, which means that they have to keep scrolling down after each check/uncheck. Is there a way to prevent this?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Ajax solution

Of course, the best way is to use an Ajax call on that. The page is not moved at all, and the data is just updated. The updatepanel is a fast and easy solution for starting – not an optimal solution, but if you have a simple page, it is a very good one.

Second solution

A second solution is to use anchor #. You set the point on which you like it to show up:

<a name="PointA"></a>

And you call the page using that anchor as page.aspx#PointA.

Third solution

A third solution is to use the inside JavaScript code of ASP.NET. On the page declaration (top first line) <%@ Page MaintainScrollPositionOnPostback="true" %>.

Or on the web.config to affect all pages, <pages maintainScrollPositionOnPostBack="true" />.

Or programmatically System.Web.UI.Page.MaintainScrollPositionOnPostBack = true; to open it and close it by demand.

Using jQuery

With only two lines of jQuery code you can make a nice animation on the point you like to move after the post back:

var WhereToMove = jQuery("#PointA").position().top;
jQuery("html,body").animate({scrollTop: WhereToMove }, 1000);

And you move the page to this element:

<a id="PointA" name="PointA"></a>

Google search

And finally, you can use custom JavaScript code to do the same. There are many samples on the Internet for this: https://www.google.com/?q=asp.net+remain+position

Method 2

The two best ways to Prevent Page scrolling after Postback are:
Put this in the web.config .
1)
pages maintainScrollPositionOnPostBack=”true”

Many People Questioned that where is the exact place to put this line.
So the Exact Place for putting this line is

<system.web>
<pages maintainScrollPositionOnPostBack="true">
</system.web>

Note : This will apply on the whole solution it prevent each form
scrolling

2) The second way to achive this is put this Line at the top of aspx File

MaintainScrollPositionOnPostback=true

Like This

<%@ Page MaintainScrollPositionOnPostback=true Language="C#" AutoEventWireup="true" CodeBehind="xx.aspx.cs" Inherits="xx.Global" %>

Note: This will apply on the specific form which u want to prevent.

Method 3

There are three possible ways that I can think of:

1. On the Page in which the scroll should be disabled, set the attribute MaintainScrollPositionOnPostback in Page (“<%@ Page ….>”) directive to true i.e. <%@ Page MaintainScrollPositionOnPostback=true ...other settings... > should appear on the top of the aspx page
2. For all pages in the website, add the following line in web.config:
   <pages MaintainScrollPositionOnPostback=true>
3. Incorporate AJAX Queries

Method 4

When you want to stop scrolling and page refreshing MaintainScrollPositionOnPostback=”true” tag is the most important thing.

Method 5

HTML Tags can be referenced programmatically in .NET thanks to the runat tag.

Simply give the body tag a runat=”server” in the HTML and an id=”body” or whatever you want to reference it as in code (I’ll use body for the example).

Then you can add/modify attributes of the tag in code like so:

Body.Attributes.Add("scroll", "no")

Put the code on page load.

Method 6

Put this line in the webconfig file:

<pages maintainScrollPositionOnPostBack="true">

Method 7

you can override “scrollTo” method of window and do nothing in it, so the try of updatePanel to set the pages scroll position will fail 🙂

function scrollTo(x, y) {
}

Method 8

MaintainScrollPositionOnPostback does not always work in chrome, and sometimes causes problems with the logic required on postback. This is a simple javascript code that is equivalent to MaintainScrollPositionOnPostback.

    window.onload = function () {
        var scrollY = parseInt('<%=Request.Form["scrollY"] %>');             
        if (!isNaN(scrollY)) {
            window.scrollTo(0, scrollY);
        }
    };
    window.onscroll = function () {
        var scrollY = document.body.scrollTop;
        if (scrollY == 0) {
            if (window.pageYOffset) {
                scrollY = window.pageYOffset;
            }
            else {
                scrollY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
            }
        }
        if (scrollY > 0) {
            var input = document.getElementById("scrollY");
            if (input == null) {
                input = document.createElement("input");
                input.setAttribute("type", "hidden");
                input.setAttribute("id", "scrollY");
                input.setAttribute("name", "scrollY");
                document.forms[0].appendChild(input);
            }
            input.value = scrollY;
        }
    };

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0