html - 如何调试书签 anchor 不起作用

Question

我有一个非常复杂的 html 页面，并且我在各个点添加了一些书签 anchor 。 anchor 看起来像这样:

<a href="#foo bar">click here for foo bar</a>
lorum ipsum etc
<a name="foo bar">foo bar</a>

但是当你点击它们时，什么也没有发生——地址栏中的 url 不会改变，页面也不会移动。

如果我把我的 anchor 拿出来放到一个更简单的页面上，它们就会开始工作，所以我认为一定有什么东西以某种方式干扰了导航，但我想不出如何确定它。我想知道某个地方的 javascript 错误正在取消导航，但该页面有数千行 javascript，我还没有发现任何可疑之处。

Chrome 和 Firefox 中都会出现此问题。

我该如何调试这个问题？

更新:这可能是 CSS 问题吗？目标 anchor 在 <div> 内使用 CSS 属性 overflow:auto; .这导致滚动条出现在 div 内而不是页面边缘 - 我的简单文本页面不是这种情况。

更新 2:overflow:auto 不会破坏命名 anchor ； tested with a simple example

Answer 1

命名 anchor 需要有一个单字名称或 id(id 更好，因为名称正在被弃用)

这将起作用:

<a href="#foo-bar">click here for foo bar</a>
    lorum ipsum etc
<a id="foo-bar">foo bar</a>