How to prevent a click on a '#' link from jumping to top of page?

Solution 1:

So this is old but... just in case someone finds this in a search.

Just use "#/" instead of "#" and the page won't jump.

Solution 2:

In jQuery, when you handle the click event, return false to stop the link from responding the usual way prevent the default action, which is to visit the href attribute, from taking place (per PoweRoy's comment and Erik's answer):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Solution 3:

you can even write it just like this:

<a href="javascript:void(0);"></a>

im not sure its a better way but it is a way :)

Solution 4:

Solution #1: (plain)

<a href="#!" class="someclass">Text</a>

Solution #2: (needed javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

Solution #3: (needed jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Solution 5:

You can use event.preventDefault() to avoid this. Read more here: http://api.jquery.com/event.preventDefault/.