jquery toggle: clicking on link jumps back to top of the page

Question

I created a jquery toggle, but when I click the link to open a div it will jump to the top of the page. how can I fix this?

I know I could replace the link with something else but I need to make it clear to the users that it's a link and that they can click on it.

Answer 1

Add return false; to the end of the code that runs when you click the link.

$('a.myLink').toggle(function() {
    // run my code
    return false;
});

Alternatively, you can grab the event object, and call .preventDefault().

$('a.myLink').toggle(function(event) {
    event.preventDefault();
    // run my code
});

Both of these methods disable the default behavior of the link.

The first one will also prevent the event from bubbling, so use it only if you have no need to utilize the event bubbling.

Answer 2

That is because there's a default action associated with elements like links, checkboxes, radio buttons etc. You can cancel it like so:

$('a.mylink').click(function(ev) { // Pass in the event object to your function
    // do stuff
    ev.preventDefault();
    return false;
});

More information here: http://api.jquery.com/event.preventDefault/

In the rare event of attaching an event handler to a child of a link you'll also want to use event.stopPropagation(), to stop the event bubbling up the DOM.