CODEWITHSUNDEEP
jqueryhyperlinkhref
Tom
Tom

Reputation: 4431

jQuery hyperlinks - href value?

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?

Upvotes: 46

Views: 116214

Answers (12)

amurrell
amurrell

Reputation: 2455

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

Upvotes: 0

Best
Best

Reputation: 71

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!

Upvotes: 4

Dotcream
Dotcream

Reputation: 21

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

Upvotes: -1

Pratik Thakkar
Pratik Thakkar

Reputation: 405

Instead you can simply have the href like below:

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

It will not scroll to the top.

Upvotes: -1

Justin
Justin

Reputation: 11

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!

Upvotes: 1

talentedmrjones
talentedmrjones

Reputation: 8111

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() .

Upvotes: 39

mohsen
mohsen

Reputation: 67

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

Upvotes: 5

roryf
roryf

Reputation: 30160

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;
});

Upvotes: 9

djspark
djspark

Reputation: 179

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;});

Upvotes: 5

bart
bart

Reputation: 15298

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();

Upvotes: 12

Bogdan Constantinescu
Bogdan Constantinescu

Reputation: 5356

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

Upvotes: 51

gargantuan
gargantuan

Reputation: 8944

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.

Upvotes: 37

Related Questions