How to make hyperlink change text in overflow:hidden div without jumping to the div

Question

I have a div element with fixed height and width and overflow:hidden, and I have a menu that causes this div to scroll to anchors in the text within the div. However, when you click on an item on this menu, it doesn't just scroll the div, it also scrolls the page to the div. How do I prevent this second from happening. That is, I just want the div to scroll without the page itself scrolling.

So I have
<div id="boxcontent">
<p id="id1">Some content</p>
<p id="id2">Some content</p>
<p id="id3">Some content</p>
</div>

boxcontent { width:600px; height:180px; overflow:hidden; margin-left:auto; margin-right:auto; }

And then a ul with anchor links to id1, id2, etc.

Does this make sense?

Answer 1

Use overflow-x:scroll

boxcontent { width:600px; height:180px; overflow-x:scroll; margin-left:auto; margin-right:auto; }

I think that's what you mean anyway.

Answer 2

Sounds like you need to prevent the default action of your links in your click event. event.preventDefault() may or may not work cross-browser, but the IEs should have an equivalent if you look.