jQuery hyperlinks - href value?

Question

Hi, On my website I use jQuery to hook the events of elements, namely hyperlinks. As these hyperlinks only perform actions on the current page, and do not lead anywhere, I have been putting a href attribute of "#" in:

<a href="#">My Link</a>

However in some browsers this causes the page to scroll right to top which is obviously undesirable behaviour. I've tried using a blank href value, or not including one, but then the mouse does not change to the hand cursor upon hovering.

What should I put in there?

Answer 1

Add return false to the end of your click handler, this prevents the browser default handler occurring which attempts to redirect the page:

$('a').click(function() {
// do stuff
return false;
});

Answer 2

You should really put a real link in there. I don't want to sound like a pedant, but that's a fairly bad habit to get into. JQuery and Ajax should always be the last thing you implement. If you have a link that goes no-where, you're not doing it right.

I'm not busting your balls, I mean that with all the best intention.

Answer 3

$('a').click(function (event) 
{ 
     event.preventDefault(); 
     //here you can also do all sort of things 
});

Then you can put in every href whatever you want and jQuery will trigger the preventDefault() method and you will not be redirected to that place.

Answer 4

Why use a <a href>? I solve it like this:

<span class='a'>fake link</span>

And style it with:

.a {text-decoration:underline; cursor:pointer;}

You can easily access it with jQuery:

$(".a").click();

Answer 5

using jquery, you may want to get only to those with a '#'

$('a[href=#]').click(function(){return false;});

if you use the newest jquery (1.3.x), there's no need to bind it again when the page changes:

$('a[href=#]').live('click', function(){return false;});

Answer 6

you shoud use <a href="javascript:void(0)" ></a> instead of <a href="#" ></a>

Answer 7

Those "anchors" that exist solely to provide a click event, but do not actually link to other content, should really be button elements because that's what they really are.

It can be styled like so:

<button style="border:none; background:transparent; cursor: pointer;">Click me</button>

And of course click events can be attached to buttons without worry of the browser jumping to the top, and without adding extraneous javascript such as onclick="return false;" or event.preventDefault() .

Answer 8

I know this is old but wow, there's such an easy solution.

remove the "href" entirely and just add a class that does the following:

.no-href { cursor:pointer: }

And that's it!

Answer 9

The button solution seems to be the best!

jahja

Answer 10

Instead you can simply have the href like below:

<a href="javascript:;">My Link</a>

It will not scroll to the top.

Answer 11

<a href="#nogo">My Link</a>