Unexpected page scroll up when clicking a link

Question

I wrote an HTML page which is being viewed primarily on the iPad. Basically it's an FAQ list with a hover effect on each question. To initiate the hover effect on the ipad I had to put a dummy link like this.

<a href="#">The question?</a>

Here is the problem which is valid for every browser: When the list is so long that you have to scroll down and when you click on a link at the bottom of the page, it jumps back to the top while initiating the hover effect. I made a fiddle for demonstrating purpose:

http://jsfiddle.net/SWXHR/1/

When scrolling down and clicking on the last link, the page will jump to the top.

Question: How can I prevent the page from jumping to the top when using a dummy link?

Answer 1

Add this to your links:

<a href="#" onClick="return false;">The question?</a>

Or if you're doing it through JQuery:

$('a[href="#"]').click(function(event){

    event.preventDefault();

});