ASP.NET allows you to bind to code

Question

I have a simple web form with this code:

//...
//tons of text
//...
<a name="message" />
//...
//tons of text
//...
<asp:Button ID="ButtonSend" 
                runat="server" 
                text="Send"
                onclick="ButtonSend_Click" />

After POST, I want the user to go to my anchor "message". I have the following code for this:

protected void ButtonSend_Click(object sender, EventArgs e)
{
this.ClientScript.RegisterStartupScript(this.GetType(),
                                        "navigate",
                                        "window.location.hash='#message';",
                                        true);
}

This simple JavaScript does not work in Firefox 3.5.2 - the URL changes in the browser, but the page is not bound to a binding. In IE 8, it works great.

Why is this JavaScript code not working in Firefox? Did I miss something?

Answer 1

I solved my problem. JavaScript code was called before my anchor even existed. Therefore, Firefox did not scroll down the page.

My code now looks like tihs:

this.ClientScript.RegisterStartupScript(this.GetType(),
                                        "navigate",
                                        "window.onload = function() {window.location.hash='#message';}",
                                         true);

After loading the page, I call my simple JavaScript function.

Cleiton. Firebug , getElementById . HTML, andrewWinn - JavaScript , . .

!

Answer 2

Mendoza, scrollIntoView.

, , :

this.ClientScript.RegisterStartupScript(this.GetType(),
                                        "navigate",
                                        "document.getElementById('id_of_the_element').scrollIntoView();",
                                        true);

Answer 3

. HTML? , FireFox . , .

Answer 4

You can try using the jQuery LocalScroll plugin . Using this, you can scroll using:

$(function() {
    $.scrollTo("#message");
});

Or with ASP.NET code:

protected void ButtonSend_Click(object sender, EventArgs e)
{
    this.ClientScript.RegisterStartupScript(this.GetType(),
                                            "navigate",
                                            "$(function() { $.scrollTo('#message'); });",
                                             true);
}

This is not an ideal solution, especially if you are no longer using jQuery anywhere in your project, but it may solve your problem.