Prevent page scrolling after postback

问题:

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?

回答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

回答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.

回答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

回答4:

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

回答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.

回答6:

Put this line in the webconfig file:

<pages maintainScrollPositionOnPostBack="true">