ASP.NET navigate to anchor in code behind

Question

I have a simple Web Form with code like this:

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

After POST I want to navigate user to my anchor "message". I have 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 is not working in Firefox 3.5.2 - url is changing in browser but page is not navigated to anchor. In IE 8 it works perfectly.

Why this JavaScript code is not working in Firefox? Am I missing something?

Answer 1

I've solved my problem. JavaScript code was called before my anchor even existed. That's why Firefox wasn't scroll page down.

My code looks now like tihs:

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

After page load I'm calling my simple JavaScript function.

The key to found solution was Cleiton answer. Firebug reports that getElementById was returning null reference. Then I looked at generated HTML like andrewWinn suggested - JavaScript was called before anchor existed. Made little googling and found solution.

Thanks for your answers!

Answer 2

Mendoza, you can use native scrollIntoView function.

To do what you want, just write:

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

Answer 3

I ran into this once. Have you taken a look at the actual HTML? If I remember, FireFox was being case sensative on the anchors. I don't know if that changed recently or not.

Answer 4

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

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

Or with your ASP.NET code:

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

It's not an ideal solution, especially if you're not using jQuery anywhere in your project already, but it might solve your problem.