How to prevent jumping to top of screen during jQuery animations

Question

I have multiple links that show/hide divs throughout (using slideDown()). Each of the links are

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

Everytime you click on the link, it jumps back to the top of the screen while it animates. I'm assuming it's because of the #. Is there any way in jQuery to focus on the animation rather than jump to the top of the screen each time? Thanks

Answer 1

You will need to return false in the function you have bound to the link's click event.

Answer 2

Use return false at the end of the click function.

$(function(){
    $("#an1").click(function(){
         // your animation code
         return false;
    });
});

<a id="an1" href="#">click me</a>

Answer 3

In the onClick handler, disable the default action of the anchor element ...

$('a').click(function(e) {
e.preventDefault();
// ANIMATION STUFF GOES HERE...
});

Answer 4

In the event handler function, use e.preventDefault();, assuming e is the event object. Optionally, return false from the handler function.