Maintain Scroll Position after Asynchronous Postback
Do you want to maintain the scroll position of a GridView, Div, Panel, or whatever that is inside of an UpdatePanel after an asynchronous postback? Normally, if the updatepanel posts back, the item will scroll back to the top because it has been reloaded. What you need to do is “remember” where the item was scrolled to and jump back to there after the postback. Place the following script after the ScriptManager on your page. And since the _endRequest event of the PageRequestManager happens before the page is rendered, you’ll never even see your item move!
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('scrollDiv').scrollLeft;
yPos = $get('scrollDiv').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('scrollDiv').scrollLeft = xPos;
$get('scrollDiv').scrollTop = yPos;
}
</script>
cool. It really works for my page. Thanks a lot!
Could you give me a sample with C# asp.net 2 Ajax masterpage?
Thanks a lot!!!
wyqws:
Sorry for not replying sooner. Holiday craziness.
This is javascript, so it doesn’t matter if you are programming in C# or VB.NET. And as for master pages, just place the script at the bottom of your content page and change each instance of
$get(’scrollDiv’
to
$get(’<%= scrollDiv.ClientID %>’
Hi,
I encounterd a related issue, and I was wondering if you can help me with it.
I put a MultiView control on a UpdatePanel, and a few View Controls on the MultiView. The Views are of different sizes. View 1 is much shorter than View 2. There’s a Back button at the bottom of View 2. So when I scroll down to the bottom of View 2 and press the Back button, it went back to View 1, but not the very top. How can I make it scroll to the top in this case?
Thank you and Happy New Year!
GoShen
GoShen:
Consider using window.scrollTo(0,0); when you want to go to the top of the page.
Great tip! Congratulations!
Worked fine for me! Thanks a lot!
Thanks for information.
many interesting things
Celpjefscylc
hi - i am unable to get this to work when using it within master pages for which the content page has multiple update panels?
i have tried on a content page that has only one update panel and i just get “xpos is undefined”?
i have tried putting this javascript in several different place but no luck…
would appreciate any pointers on this one….
Great work… Thanks man.
u r a ajax puli(tiger)
Hi, I’m new to Asp.Net and this may sounds like a dummy question but I’m not able to use the trick with master pages.
Even when doing as specified on the third comment. I did changed all instances of
$get(’scrollDiv’)
to
$get(’’)
I tried both ways, script on the master page, and moving the script within my content page just before the closing content tag , but either won’t work. My preferred behavior is to have this on the master page since I’ll need this behavior on all my content pages.
Here’s the error I got:
Compiler Error Message: CS0103: The name ’scrollDiv’ does not exist in the current context
Source Error:
Line 26: function BeginRequestHandler(sender, args)
Line 27: {
Line 28: xPos = $get(”).scrollLeft;
Thank ya sir, this helps out a lot !!!
Another self proclaimed novice :0)
Thanks, its works great.
I have been looking for a solution to this for many hours!