JQuery: Stop page reloading to top

Howdy.

I'm making this little gallery of thumbnails, that if one is clicked on, fadeOut() the current main image, then fadeIn() the clicked on thumbnail.

Its all working, but the problem is that the page always scrolls back to the top after clicking on the thumbnail and the main image fades out. I've tried using return false; but to no avail. In fact, I've tried using return false on all levels of the stack.

My images are example.jpg for the main img, and then tn_example.jpg for the thumbnail...

$(function() {
$(".photostrip_img")
.click(function()
{
var src = $(this).attr("src");
src = src.replace('tn_', '');
$("#main_img").fadeOut("slow", function() {
$("#main_img").attr("src", src);
$("#main_img").fadeIn("slow");
});

});

});



Psudo code.

For every thumbnail with class photostrip_img
if clicked on
get its' source and remove 'tn_' from it.
fade out the current main image
once fade out is complete
change main src to new src
fade back in


Thanks in advance.

 

Solved!

Got the lil bugger....

I found that I had not declared a height on the div contaiing the main image, so that when the fadeOut completed, the div resized to zero, shortening the page, and only making it look as if it reloaded.

Declared height, all working fine.

I was getting paranoid as to why return false; was not working on just my computer.