Exploring all things .NET and beyond...

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.

14 comments:

Anonymous said...

Thanks a lot :)

Chetna said...

Great...
You Solved my promblem

Anonymous said...

Page.SetFocus(Me.ui_btnPageBottom.ClientID)

What is this 'Me' stands for?

Allen Conway said...

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.

Anonymous said...

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

Lily said...

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

robert nadar said...

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

Anonymous said...

great, solved my problem

Patrick Fitzgerald said...

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

Anonymous said...

It works.

Thanks a lot

Anonymous said...

It worked, Thanks a lot

Anonymous said...

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

Surendra said...

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

Amila Jayawickrama said...

Thanks a lot. It helped me

Post a Comment