HTML锚点在div中没有​​溢出工作：滚动？

Question

我用<div>包裹了所有内容，其高度和宽度均为100px。此<div>内的内容包含索引和内容。

问题是，点击以下代码中的“a2”不会让我跳转到谷歌浏览器的底部内容。

<div style="height:100px;width:100px;overflow:scroll;">
    <ul>
        <li><a href="#a1">a1</a></li>
        <li><a href="#a2">a2</a></li>
    </ul>
    <h2 id="a1">a1</h2>
    a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>
    <h2 id="a1">a2</h2>
    a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>
</div>

可以从以下链接查看工作代码。 http://jsfiddle.net/L7rQ6/

是否有一些很好的解决方案可以让“a2”跳转到正确的内容？

Answer 1

您需要使用：

<h2 id="a2">

而不是：

<h2 id="a1">

代表您的第二个h2元素。目前您已复制id，这也是无效的HTML。

<强> Updated Fiddle

Answer 2

您错过了更新第二个<h2>元素集id="a2"而不是id="a1"

检查 demo jsfiddle

更新这个小，

<h2 id="a2">a2</h2>

HTML（更新）

<div style="height:100px;width:100px;overflow:scroll;">
    <ul>
        <li><a href="#a1">a1</a></li>
        <li><a href="#a2">a2</a></li>
    </ul>
    <h2 id="a1">a1</h2>
           a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>
    <h2 id="a2">a2</h2>
           a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>
</div>

Answer 3

正如Felix和user1153551所说，你已经复制了两个标签的Id，试试这个。

<div style="height:100px;width:100px;overflow:scroll;">
    <ul>
        <li><a href="#a1">a1</a></li>
        <li><a href="#a2">a2</a></li>
    </ul>
    <h2 id="a1">a1</h2>
    a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>
    <h2 id="a2">a2</h2>
    a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>
</div>