Prevent anchors from pushing pages to the bottom (HTML)

Question

I have a div with style="overflow: auto" with some text in it. That text has some anchors, which I have links left of the div (not within the div) and everytime I click to go to an anchor, th page goes to the bottom, like the anchor was in the bottom of the page.

Is there any way to prevent this from happening?

<a href='#id2'>Link</a>
<div style='width: 100px; overflow: auto;'>
Text Inside, Big text with <hr id='#id10' /> here
Text Inside, Big text with <hr id='#id5' /> here
Text Inside, Big text with <hr id='#id6' /> here
Text Inside, Big text with <hr id='#id27' /> here
Text Inside, Big text with <hr id='#id24' /> here
Text Inside, Big text with <hr id='#id20' /> here
Text Inside, Big text with <hr id='#id21' /> here
Text Inside, Big text with <hr id='#id23' /> here
Text Inside, Big text with <hr id='#id22' /> here
Text Inside, Big text with <hr id='#id2' /> here
<div>

EDIT: I'm nor using Javascript neither Iframes

EDIT: Tested in Firefox 3

Answer 1

It sounds to me like all that is happening is that the browser it trying to take your anchor to the top of the page, which is it's normal behavior in this situation. So it's not scrolling to the bottom so much as trying to get your link to the top of the page but hitting the bottom of the scroll bar before it gets there.

Some example code would be helpful though.

Answer 2

You can only have one id per page (id2, id3, id4, etc.) You've got id2 listed 10 times which is most likely causing your link to break. Also, you cannot start ids with a pound sign; valid IDs start with ([A-Za-z]).

Answer 3

This is the browsers native functionality. If you want to disrupt it without using javascript, then you might as well charge hell with a water pistol because you're not going to be very successful.

Using a simple framework like jQuery would likely clear this up in just a couple lines of code. You could scroll elements into view, and prevent default activity or anchors.

Answer 4

LuRsT, have you found a solution to this? I have the same problem and I'm trying to find the magic piece of code that will prevent the scrolling after clicking on anchor links. Have you find something that helped you?