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

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

I’m currently using tags with jQuery to initiate things like click events, etc.
Example is
But I hate how the ‘#’ makes the page jump to the top of the page. What can I do instead?


Solution 1:

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):

    // Special stuff to do when this link is clicked...

    // Cancel the default action

Solution 2:

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 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 🙂

Related:  How to change background Opacity when bootstrap modal is open

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>
$('a.someclass').click(function(e) {

Solution 5:

You can use event.preventDefault() to avoid this. Read more here:

Solution 6:

Just use <input type="button" /> instead of <a> and use CSS to style it to look like a link if you wish.

Buttons are made specifically for clicking, and they don’t need any href attributes.

The best way is to use onload action to create the button and append it where you need via javascript, so with javascript disabled, they will not show at all and do not confuse the user.

When you use href="#" you get tons of different links pointing to the same location, which won’t work when the agent does not support JavaScript.