jQuery unwanted scroll up

Question

I have a bunch of description blocks that are supposed to fade in when the corresponding image is clicked, fading out the previous one. Fading is working, but the page keeps scrolling up on each click, messing with the user's navigation.

google.load("jquery", "1.3");
google.setOnLoadCallback(function() {
jQuery(function($) {

   $('#a').click(function(e){    
        $('#bio-b,#bio-c').fadeOut('slow', function(){
            $('#bio-a').fadeIn('slow');
        });
    });
});
});

I am a JavaScript/jQuery noob and mostly pieced this together from code found online. I hope the code is not all backwards.

edit: this is the HTML for image that would be clicked in this case :

<a href="#" id="a"><img></a>

description:

<article id="bio-a" class="bio"></article>

and the CSS (the description isn't displayed on loading the page)

#bio-a {
    display : none;
}

Any thoughts on what's causing this, how to fix it?

Answer 1

Using an href of # effectively means to look for an element with an id of nothing. Obviously you do not have that. To fix the link of being 'followed' you need to call preventDefault on the event that gets passed to your handle.

I.e.:

$('#a').click(function(e){    
    $('#bio-b,#bio-c').fadeOut('slow', function(){
        $('#bio-a').fadeIn('slow');
    });
    e.preventDefault();
});