The Disturbed Buddha

Simple Observations of a Self-proclaimed Novice

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>
About these ads

December 3, 2007 - Posted by | Ajax, ASP.NET, Javascript, Web Development

35 Comments »

  1. cool. It really works for my page. Thanks a lot!

    Comment by bbqbbq | December 6, 2007 | Reply

  2. Could you give me a sample with C# asp.net 2 Ajax masterpage?
    Thanks a lot!!!

    Comment by wyqws | December 28, 2007 | Reply

  3. 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 %>’)

    Comment by disturbedbuddha | January 2, 2008 | Reply

  4. 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

    Comment by GoShen | January 2, 2008 | Reply

  5. GoShen:

    Consider using window.scrollTo(0,0); when you want to go to the top of the page.

    Comment by disturbedbuddha | January 2, 2008 | Reply

  6. Great tip! Congratulations! :) Worked fine for me! Thanks a lot!

    Comment by Pescoxa | January 10, 2008 | Reply

  7. Thanks for information.
    many interesting things
    Celpjefscylc

    Comment by celpjefscycle | January 12, 2008 | Reply

  8. 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….

    Comment by dave | January 26, 2008 | Reply

  9. Great work… Thanks man.

    u r a ajax puli(tiger)

    Comment by Murali Murugesan | February 28, 2008 | Reply

  10. 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;

    Comment by LeFrank | March 6, 2008 | Reply

  11. Thank ya sir, this helps out a lot !!!

    Another self proclaimed novice :0)

    Comment by X | March 9, 2008 | Reply

  12. Thanks, its works great.
    I have been looking for a solution to this for many hours!

    Comment by Paul Gough | March 18, 2008 | Reply

  13. It works great for me, thanks a lot. This is the easiest and most effective solution. This is better than any other solution.

    I need one more help, how can I scroll to the bottom when required. Actually I am using Footer row to enter new record and want to scroll to the bottom when footer row is visible.

    Thanks a lot!!

    Comment by Gagan | March 25, 2008 | Reply

  14. ultimate optimized solution.
    I visited many website through Google but your solution is best and working.
    thank you, you are great.

    Comment by Vikram Gehlot | April 25, 2008 | Reply

  15. To the orginal author: Thank you very much for this code. I was banging my head against the wall to figure this out and you saved my day :)

    God bless you and the coder who help each other!

    Comment by Vincy | May 1, 2008 | Reply

  16. You rule! This totally works!

    Comment by Greg | September 4, 2008 | Reply

  17. Thank you very much for posting this. This really helped me out and took care of the problem in a very simple way. I will keep checking out your site from now on.

    Comment by Chris B. | October 27, 2008 | Reply

  18. Solved my Problem – Thank you Very Much

    Comment by Ram Mohan | March 16, 2009 | Reply

  19. Excellent Job

    Comment by Dnana | June 25, 2009 | Reply

  20. VERY NICE SHOT, Thank you

    Comment by Faramarz Phorozan | July 5, 2009 | Reply

  21. INGENIOUS!! Thanks dude…you don’t know how much of a lifesaver you are! I’m building a statue right now for you

    Comment by brobert6 | October 20, 2009 | Reply

  22. Really gr8 stuff.

    Comment by MAYANK | March 31, 2010 | Reply

  23. Sweet stuff MAN !!!

    Comment by serg | July 9, 2010 | Reply

  24. Works perfect! Gracias amigo!

    Comment by Ivan | December 28, 2010 | Reply

  25. Thanks
    What an easy and Cool idea

    Comment by Durgesh Pandey | February 9, 2011 | Reply

  26. Its working 100 % !!
    Just Follows step describe above !!
    Thanx a ton for valuable posting !!

    Comment by Karan Shah | March 21, 2012 | Reply

  27. Thanks a lot ! it works perfect ! You are GOD !!!

    Comment by Guess | July 13, 2012 | Reply

  28. Thanks alot………..

    Comment by kavya | August 3, 2012 | Reply

  29. What’s up to every , since I am in fact eager of reading this website’s post to be updated on a regular basis.
    It carries fastidious data.

    Comment by Matt Clepper | December 11, 2012 | Reply

  30. Very good post. I absolutely love this website.
    Keep it up!

    Comment by florange38.ru | March 23, 2013 | Reply

  31. Thanks !!!!!!!!!! This works for me….

    Comment by Darshan Shirke | October 11, 2013 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: