jQuery hyperlinks - href value?

Question

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

$('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 2

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 3

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

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 6

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 7

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

Answer 8

Wonder why nobody said it here earlier: to prevent <a href="#"> from scrolling document position to the top, simply use <a href="#/"> instead. That's mere HTML, no JQuery needed. Using event.preventDefault(); is just too much!

Answer 9

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 10

I almost had this problem and it was very deceiving. I am providing an answer in case someone winds up in my same position.

1. I thought I had this problem
2. But, I was using return false and javascript:void(0);
3. Then a distinct difference in problem kept surfacing:
4. I realized it's not going ALL the way to the top - and my problem zone was near the bottom of the page so this jump was strange and annoying.
5. I realized I was using fadeIn() [jQuery library], which for a short time my content was display:none
6. And then my content extended the reach of the page! Causing what looks like a jump!
7. Using visibility hidden toggles now..

Hope this helps the person stuck with jumps!!

Answer 11

Instead you can simply have the href like below:

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

It will not scroll to the top.

Answer 12

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