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:

Try
'Code
Finally
'Regardless of outcome, set focus to the bottom of the page
Page.SetFocus(Me.ui_btnPageBottom.ClientID)
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.

17 comments:

  1. Great...
    You Solved my promblem

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

    What is this 'Me' stands for?

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

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

    ReplyDelete
  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

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

    ReplyDelete
  7. great, solved my problem

    ReplyDelete
  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!

    --patrick

    ReplyDelete
  9. It works.

    Thanks a lot

    ReplyDelete
  10. It worked, Thanks a lot

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

    ReplyDelete
  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 :)

    ReplyDelete
  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!

    ReplyDelete