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.


Post a Comment