Monday, January 24, 2011

How To: Scroll To The Bottom of an ASP.NET Web Page After Postback

Not a post about bleeding edge technology here, but just a little technique I ran across here for ASP.NET web pages. I needed a way to have the focus shift to the bottom of a page after a button near the top of the screen was pressed. Unfortunately setting focus via Page.SetFocus(Me.BottomOfPageServerControl.ClientID) did kind of work, but only shifted to the top of the control, and the control had a large height. Therefore the scroll bar was still not at the bottom, and the resulting pertinent data in my situation was at the bottom of the page.

The solution? Place a server control at the bottom of the page with CSS properties that prevent it from physically being viewed, don't affect scroll bars, and yet can still have focus shifted to it.

So begin by placing an ASP.NET button (or any other small server control) at the bottom of your markup, and add some inline styling to be most compact and streamlined if you wish:

<!--Button will render, but not actually be visible to the client-->
<asp:Button ID="ui_btnPageBottom" runat="server" Text="Button" style="margin-left:-999px;" />
Notice above the styling places it off the page, but the button will not create any lengthy scroll bars, etc. Lastly, add the code server side on the 'Finally' of the button click event to shift focus to the bottom of the page:

'Regardless of outcome, set focus to the bottom of the page
End Try
That's it! I am sure there are at least 20 ways to do this, including a purely client side solution with JavaScript, but this was 2 lines of code to accomplish what I needed.


  1. Great...
    You Solved my promblem

  2. Page.SetFocus(Me.ui_btnPageBottom.ClientID)

    What is this 'Me' stands for?

  3. The 'Me' keyword refers to the specific instance of a class or structure in which the code is currently executing. In my case it is the instance of the page with the Button control, so 'Me' refers to the page's instance.

  4. Thanks Allen. That's helped me so much. Appreciate it.

  5. Hi Allen,

    I am also trying to do the same but when my scenario is after clicking on submit the page should be scrolled to top.

    I tried your solution but what happens is it scrolls but then scrolls back to the bottom because of the postback.

    I already have Page.MaintainScrollPositionOnPostBack = False in my code.

    Any other workarounds?

    Thank you

  6. Thanks Allen,
    You saved my day.
    Code helped a alot

  7. great, solved my problem

  8. With all the other solutions I've tried from many other different posts, this one proved to be the only one that actually worked. Thanks!


  9. It works.

    Thanks a lot

  10. It worked, Thanks a lot

  11. You da man!! Thanks for sharing.
    The control you want to scroll to doesn't necessarily have to be hidden as in my case.

  12. Thanks Sir You solved my problem which was Modelpopup Extender was not showing in center after postback due to scroll position after using ur trick it is showing in center of screen :)

  13. Tried many different things, updatepanels, javascript etc. This was the solution that did what I needed which was go to the bottom of the page on particular postback where Finish button was located for page. My appliction is complex with masterpage and launched pages from gridview link and an updatepanel for page as well as update panels in custom controls on page. Javascript was being called but not working. My guess is the update panel was overriding javascript action. Thank-you!