[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Scroll to top when update inside update panel

Posted on 2009-02-09
8
Medium Priority
?
2,183 Views
Last Modified: 2012-05-06
I have a repeater that is placed inside an update panel.
When I click at one of the buttons inside this I want the page to be scrolled to the top.

I have googled a solution: (see code)

The problem with this solution is that it respond to all updates. I want it to execute just when the user clicks a specific button..

somebody knows a easy solution?
<script type="text/javascript" language="javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
  function EndRequestHandler(sender, args)
  {
  scrollTo(0,0);
  }
</script>

Open in new window

0
Comment
Question by:jimmieandersson
7 Comments
 
LVL 15

Expert Comment

by:Praveen Venu
ID: 23589291
simple.. In the button1_click after all other code execute

Page.RegisterStartUpScript("scr","<script>scrollTo(0,0);</script>")

0
 

Author Comment

by:jimmieandersson
ID: 23589371
thanks, I changed your script a little to:

ScriptManager.RegisterClientScriptBlock(uplShoppingCart, this.GetType(), "scrToTop", "<script>scrollTo(0,0);</script>", false);


what happens now is that the page first scroll to the top but only stays until the page is fully loaded again (<1 sec). It then goes back to the original scroll position.
0
 
LVL 15

Expert Comment

by:Praveen Venu
ID: 23589406
check to see if your URL has any #

else
 try

System.Web.UI.Page.MaintainScrollPositionOnPostBack = false;
ScriptManager.RegisterClientScriptBlock(uplShoppingCart, this.GetType(), "scrToTop", "<script>scrollTo(0,0);</script>", false);

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:jimmieandersson
ID: 23589510
sorry, no # in URL

this.Page.MaintainScrollPositionOnPostBack = false;
gave the same result.

I also tried setting MaintainScrollPositionOnPostBack  in the aspx @page directive but no difference
0
 

Expert Comment

by:jpopowski
ID: 24257455
I have the same issue.  It's as tho the postback is telling the app to go back to the same position, no matter how I try to override.  I've tried it at the 'onValueChanged' of a hiddenfield.  (The page number) which seems reasonable, but always end up at the same spot.
0
 

Author Comment

by:jimmieandersson
ID: 24257583
I havn't solved this yet so if you do, please let me know.
thanks
0
 
LVL 22

Accepted Solution

by:
prairiedog earned 2000 total points
ID: 24263518
You are almost there. Here is what you need:
http://weblogs.asp.net/shenderson/archive/2006/11/29/ajax-how-to-scroll-to-the-top-of-a-page-when-clicking-on-only-the-pager-controls-in-dataview.aspx
Change "ctl00_C1_JobsGridView" in the article to your button's generated ID found in page source.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month18 days, 23 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question