HTML锚点在div中没有​​溢出工作:滚动?

时间:2014-03-27 08:43:31

标签: html css anchor

我用<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”跳转到正确的内容?

3 个答案:

答案 0 :(得分:2)

您需要使用:

<h2 id="a2">

而不是:

<h2 id="a1">

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

<强> Updated Fiddle

答案 1 :(得分: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>

答案 2 :(得分:1)

正如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>