HTML Anchors not working inside divs with overflow:scroll? - html

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>a1</li>
<li>a2</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>a1</li>
<li>a2</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>a1</li>
<li>a2</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>