2

Possible Duplicate:
How do I stop a web page from scrolling to the top when a link is clicked that triggers javascript?

When I click on a date of a jQuery datepicker on my web page, my page repositions itself to the top because the date on the datepicker has an href="#" attribute.

It seems that whenever I click an <a> element that has href="#" then my page reorientates iteself to display from the top of the page. This is pretty annoying because the user is having to cope with the page moving about and may even have to scroll just to see the part of the page they were using before they clicked. Can anyone tell me how I can stop this from happening?

I can take the href attribute from some of my links, but jQuery widgets often have them in.

Many thanks

Community
  • 1
  • 1
Joe
  • 4,852
  • 10
  • 63
  • 82

7 Answers7

9

Usually when a link has href="#", it's because it's supposed to do something other than navigating (the exception being "To the top" links seen on some long pages...). The "other thing" they're doing is usually handled via JavaScript, and to make sure that they don't continue to their default handler (i.e. navigate) the JS handler should return false.

If you make sure that all your click handlers return false, you won't have this problem anymore.

If you're using jQuery to hook up your events, you could also call .preventDefault() and .stopPropagation() on the first argument to the click handler function. This will do it on it's own in most browsers, but you should still return false for compatibility.

$('.someLink').click(function(ev) {
    // do your thing

    // Prevent the click from being handled.
    ev.preventDefault();
    // Prevent the event from propagating through the DOM tree (bubbling)
    ev.stopPropagation();
    // Return false, for compatibility reasons
    return false;
});

Note: If there are click handlers in some library you're using that doesn't return false, you can always wrap it in a handler function of your own that does. But I'd consider abandoning that library...

Tomas Aschan
  • 58,548
  • 56
  • 243
  • 402
7

You can do it by doing this:

<a href="#" onclick="return false;">Click me</a>
MacMac
  • 34,294
  • 55
  • 151
  • 222
4

This should work and avoid dealing with the url hash:

<a href="javascript:void(0);">Click me</a>
Mike Thomsen
  • 36,828
  • 10
  • 60
  • 83
1

When using jQuery you can take advantage of the event.preventDefault() function such as:

$("a").click(function(event) {
  event.preventDefault();
  alert('Will not jump to top of page after alert');
});

http://api.jquery.com/event.preventDefault/

Curtis
  • 101,612
  • 66
  • 270
  • 352
  • 1
    It is recommended to also `return false`, to handle cross-browser compatibility. Furthermore, it should be noted that this event will still propagate to parent elements in the DOM tree, so to really stop everything you should also add `event.stopPropagation()`. (And since `event` is a keyword in javascript, it's better to call the variable something else - I usually end up with `ev`...) – Tomas Aschan Aug 10 '11 at 14:58
  • You don't need a js library to do this -1. – JonH Aug 10 '11 at 14:59
  • @Tomas Lycken thanks for your comments Tomas I wasn't aware of that! – Curtis Aug 10 '11 at 15:01
  • @JonH - The OP is already making use of jQuery – Curtis Aug 10 '11 at 15:01
  • @Curt - you are right i got rid of the downvote sorry – JonH Aug 10 '11 at 15:02
0

Use preventDefault method of the event object to avoid this or just return false from the click handler.

$("a").click(function(e){
   e.preventDefault();
});
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
0

You can also just not use href="#" and set cursor: pointer; in css

Dan
  • 3,338
  • 5
  • 36
  • 58
0

write some jQuery like this

jQuery('a[href=#]').attr('href','javascript:void(null);');

sushil bharwani
  • 29,685
  • 30
  • 94
  • 128