I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is clicked, which can be disruptive for user 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');
});
});
});
});
As someone who is new to JavaScript/jQuery, I put this code together mostly by referencing examples online. I hope it's all in the right order.
edit: Here's the HTML for the image that triggers the click event:
<a href="#" id="a"><img></a>
Description:
<article id="bio-a" class="bio"></article>
And here's the CSS (the description block is initially hidden from view):
#bio-a {
display : none;
}
Any ideas on what might be causing the scroll issue and how to address it?