javascript - Prevent page scrolling after postback and maintain position

Question

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?

Answer 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