Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 367
Kruug Avatar asked Apr 13 '12 03:04

Kruug


People also ask

How do I keep page position on PostBack?

An HTML DIV with vertical scrollbar gets back to original position after PostBack and hence to solve this problem we need to retain its scroll position value using JavaScript and then again apply to the DIV after PostBack. This technique helps DIV not to lose its scroll position on PostBack.

How do you maintain the scroll position?

To make sure a scrolling Artboard stays in position when you click on a prototype Link, select the Link you're working with and enable the Maintain scroll position after click option in the PROTOTYPE tab of the Inspector.

What is MaintainScrollPositionOnPostBack true?

On long Web pages, this means that the user has to scroll the page back to the last position on the page. When the MaintainScrollPositionOnPostBack property is set to true , the user is instead returned to the last position on the page. You set the MaintainScrollPositionOnPostBack property in the @ Page directive.


1 Answers

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

like image 108
Aristos Avatar answered Sep 20 '22 09:09

Aristos