ASP.net Postback - Scroll to Specific Position

Question

I have an ASP.net WebForms page that has a lot of content on the top of the screen. It has a link button that will post back to the page and show another section of the page. When the page refreshes, I would like to set focus and scroll down to this section of the page.

I tried doing

txtField.Focus()

in my code behind and it will set focus and try to scroll there, but then scrolls right back to the top. The focus is still on my text box but the position of the screen is at the very top. The Link is at the top of the screen which is causing the postback. I want to scroll to the very bottom of the screen. It does this briefly and then scrolls right back to the top.

I have tried setting

Page.MaintainScrollPositionOnPostback = false;

but that doesn't seem to help either.

Is there some way I can force it to go to a specific position? Is it possible to add an anchor tag to the URL when I postback using a button or link button?

Answer 1

Page.MaintainScrollPositionOnPostBack = true; should take you back to the same position on the screen, but you could use AJAX, or you could use SetFocus() to focus on a specific control after the postback:

http://msdn.microsoft.com/en-us/library/ms178232.aspx

Answer 2

You can use the code below if you have an anchor for the location:

Page.ClientScript.RegisterStartupScript(this.GetType(), "hash", "location.hash = '#MOVEHERE';", true);

Answer 3

In your case I suggest you to keep the default value of Page.MaintainScrollPositionOnPostBack, and use the pure javascript scrolling function

function scrollToDiv()
{
    document.getElementById('yourDiv').scrollIntoView();
}

And call it at the page startup with a little delay of 1ms (pure javascript again)

setTimeout(scrollToDiv, 1);

And finally call it from the C# code behind, with the RegisterStartupScript (js executed after all the page has been loaded) :

ScriptManager.RegisterStartupScript(Page, typeof(Page), "ScrollToADiv", "setTimeout(scrollToDiv, 1);", true);

Like this, it will bypass any asp automatic scrolling

Answer 4

Page.MaintainScrollPositionOnPostback = true seems to work just fine.

Answer 5

I've tried Matthieu Charbonnier answer, but it didn't work unless I've added

" window.scrollTo = function () { };" 

as it was suggested in http://gnidesign.blogspot.com.au/2011/06/how-to-maintain-page-scroll-on-postback.html

I've created a helper method, that's working in Chrome,FireFox and IE

public static void ScrollToControl( Page page, string clientId, bool alignToTop)
 {
     //NOTE: if there are more than one call on the page, first one will take preference
     //If we want that last will take  preference, change key from MethodBase.GetCurrentMethod().Name to anchorName
     //recommended in http://gnidesign.blogspot.com.au/2011/06/how-to-maintain-page-scroll-on-postback.html              
     String script = " window.scrollTo = function () { };" + Environment.NewLine;
     script += String.Format("document.getElementById('{0}').scrollIntoView({1});" , clientId, alignToTop.JSToString());
     page.ClientScript.RegisterStartupScript(TypeForClientScript(), MethodBase.GetCurrentMethod().Name, script, true );
     //return script;
 }
 public static string JSToString(this bool bValue)
 {
     return bValue.ToString().ToLower();
 }

Use getElementById('{0}').scrollIntoView is simpler than location.hash , because you don't need to add extra anchor element.

Parameter alignToTop is very convenient to specify do you want to show control at the top or bottom of the screen.

Answer 6

I have

<asp:MultiView ID="mvAriza" runat="server">
      <asp:View ID="View14" runat="server"> 
         ............ .......
      </asp:View>
</asp:MultiView>

on *.aspx page. And on the *.aspx.cs page on a button click.

Page.SetFocus(mvAriza.ClientID);

It works great.

Answer 7

This scroll automatically to desired Div in asp.net Control This is Function call it from Where you Want and also Download Java script file

OnClientClick="return scrollGrid()"

function scrollGrid1() { $('html,body').animate ( { scrollTop: $('#Div1').offset().top }, 'slow' ) }

Answer 8

try this

protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack) {
            string targetId = Page.Request.Params.Get("__EVENTTARGET");
            Page.ClientScript.RegisterStartupScript(this.GetType(), "focusthis", "document.getElementById('" + targetId + "').focus()", true);

        }
    }