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

Question

Warning: This may be a very stupid question...

I'm currently using <A> tags with jquery to initiate things like click events, etc.

Example is <a href="#" class="someclass">Text</a>

But I hate how the '#' makes the page jump to the top of the page...what can I do instead?

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

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

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

Answer 2

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

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

Answer 4

If you want to use a anchor you can use http://api.jquery.com/event.preventDefault/ like the other answers suggested.

You can also use any other element like a span and attach the click event to that.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Answer 5

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.

Answer 6

<a href="javascript:"></a>

Answer 7

If the element doesn't have a meaningful href value, then it isn't really a link, so why not use some other element instead?

As suggested by Neothor, a span is just as appropriate and, if styled correctly, will be visibly obvious as an item that can be clicked on. You could even attach an hover event, to make the elemnt 'light up' as the user's mouse moves over it.

However, having said this, you may want to rethink the design of your site so that it functions without javascript, but is enhanced by javascript when it is available.

Answer 8

Just use

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

Answer 9

You could just pass an anchor tag without an href property, and use jQuery to do the required action:

<a class="foo">bar</a>