[jQuery] Simple page navigation problem

Hey,

I'm sorry i don't have a live example to show, but ill try explain my
problem as best as possible.

Here is the full piece of code:

$(document).ready(function(){
$('#mainDiv').load("Home.html");
$('li.home').click(function() {
$('#mainDiv').load("Home.html");
});
$('li.about').click(function() {
$('#mainDiv').load("About.html");
});
$('li.products').click(function() {
$('#mainDiv').load("Products.html");
});
$('li.tech').click(function() {
$('#mainDiv').load("Technical.html");
});
$('li.palette').click(function() {
$('#mainDiv').load("Palette.html");
});
$('li.contact').click(function() {
$('#mainDiv').load("Contact.html");
});
$('.palettebtn').click(function() {
$('#mainDiv').load("Palette.html");
});

});

Html element:

<a href="#" class="palettebtn">
<img src="images/Palette.png" width="200" height="200" alt="Palette"
border="0"/>
</a>

Most of the script works fine, the part im having a problem with is
this:

$('.palettebtn').click(function() {
$('#mainDiv').load("Palette.html");
});

This code used to work fine, Ive scanned over it several times
and cant seem to spot the problem.

When i open the web page with this element on my local machine
and when the .palletebtn image is clicked, it sends the user to the
top of the page.
Where it should load "Palette.html" into #mainDiv

Hope i have given enough info
Any input would be appreciated

Thanks,
Joe