JQUERY scrollTop not working properly

Question

So I have this jquery code

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 50) {
        $('.top-bottom').fadeIn();
    } else {
        $('.top-bottom').fadeOut();
    }
});
$('.go-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, 300);
});
$('.go-bottom').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: $(document).height()-$(window).height()}, 300);
});

And I have it associated to this block of HTML

<div class="top-bottom">
    <a href="#" class="go-top"><img src="images/image.png" class="arrow"></a>
    <a href="#" class="go-bottom"><img src="images/image.png" class="arrow"></a>
</div>

The class arrow on the image is so I can resize it but basically I want it so when I scroll down go-top and go-bottom appear, which they are doing, but then I want it so when I click on either go-top or go-bottom it either takes me to the top, or the bottom of the page respectively, and now that's where I have the problem, whenever I click on the image it just reloads the page with the # added onto it. Anyone have any clue what I'm doing wrong, I've been trying to figure it out all afternoon and can't seem to get a hang of it, it's probably a silly mistake I've made or it may be very complex actually who knows, but if anyone could help me it would be greatly appreciated.

EDIT: http://jsfiddle.net/3v6yy/ This is basically my website, I don't know what I'm doing wrong and why this won't work, the arrow images usually appear when I look at my original file but for some reason they arent appearing here, if anyone knows how to make the effect I want(Have both arrows fade in when you scroll a few pixels from the top, and maybe even have them disappear when they're at the bottom, and when you click on them have them take you to either the top or the bottom of the page, depending on what button) it would be much appreciated if you could maybe help me out, I'm not a professional, this is a school project and I really want to do it well, so apart from getting the job done it has to be simple at the same time so I can understand whats going on basically

Answer 1

Remove that '#' from href attribute.

<div class="top-bottom">
   <a href="" class="go-top"><img src="images/image.png" class="arrow"></a>
   <a href="" class="go-bottom"><img src="images/image.png" class="arrow"></a>
</div>

As your JQuery function just take the click event, here no need of the '#' tag.