ASP.NET 导航到隐藏代码中的锚点

Question

我有一个简单的 Web 表单，其代码如下：

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

POST 之后，我想将用户导航到我的锚点“消息”。 我有以下代码：

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

这个简单的 JavaScript 在 Firefox 3.5.2 中不起作用 - 浏览器中的 url 正在更改，但页面未导航到锚点。 在 IE 8 中它运行得很好。

为什么这段 JavaScript 代码在 Firefox 中不起作用？ 我错过了什么吗？

Answer 1

我已经解决了我的问题。 JavaScript 代码在我的锚点存在之前就被调用了。 这就是 Firefox 不向下滚动页面的原因。

我的代码现在看起来像这样：

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

页面加载后，我正在调用我的简单 JavaScript 函数。

找到解决方案的关键是克莱顿的回答。 Firebug 报告 getElementById 返回 null 引用。 然后我按照 andrewWinn 的建议查看了生成的 HTML - JavaScript 在锚点存在之前被调用。 做了一点谷歌搜索并找到了解决方案。

感谢您的回答！

Answer 2

门多萨，您可以使用原生的 scrollIntoView 函数。

要做你想做的事，只需写：

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

Answer 3

我遇到过一次。 你看过实际的 HTML 吗？ 如果我记得的话，FireFox 在锚点上区分大小写。 我不知道最近有没有改变。

Answer 4

您可以尝试使用 jQuery LocalScroll 插件。 使用此功能，您可以滚动使用：

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

或使用 ASP.NET 代码：

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

这不是一个理想的解决方案，特别是如果您尚未在项目中的任何位置使用 jQuery，但它可能会解决您的问题。