jquery hide scroll to top of page div

Question

When I am at the top of my page, I need to hide the "Go-to Top" div button in jQuery. The button appears when I'm at the top of the page and I need to hide the button when the scrollbar reaches to top and show it when i start scrolling down the page.

Here is my code,

$(function() {
    var $elem = $('#content');

    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');  

    $(window).bind('scrollstart', function(){
    $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
    $(window).bind('scrollstop', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });

    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollDown: $elem.height()}, 800);
        }
    );
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
        }
    );
});

Answer 1

Just add a window scroll() method:

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('#nav_up').fadeIn();
    } else {
        $('#nav_up').fadeOut();
    }
});​

Answer 2

if($(window).scrollTop() == 0){
    //code to hide your element
}