HTML Anchors not working inside divs with overflow:scroll?

Question

I wrapped all contents with <div> which height and width is both 100px. Contents inside this <div> contains index and content.

The problem is that clicking "a2" in the following code won't let me jump to the bottom contents in Google Chrome.

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

The working code can be seen from the following link. http://jsfiddle.net/L7rQ6/

Is there some good solution to make "a2" jump to the proper contents?

Answer 1

You missing to update your 2nd <h2> element set id="a2" instead of id="a1"

Check demo jsfiddle

Update this small,

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

HTML (Updated)

<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 2

You need to use:

<h2 id="a2">

instead of:

<h2 id="a1">

for your second h2 element. Current you've duplicated id which is invalid HTML as well.

Updated Fiddle

Answer 3

As Felix and user1153551 has said you have duplicated the Id for both of the tags try this.

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