Create a 'Back-To-Top' link using jQuery with disappearing effect.

 Use the following script :

$(function(){
/* set variables locally for increased performance */
    var scroll_timer,
        displayed = false,
        $message = $('#message a'),
        $window = $(window),
        top = $(document.body).children(0).position().top;

    /* react to scroll event on window */
    $window.scroll(function () {
        window.clearTimeout(scroll_timer);
        scroll_timer = window.setTimeout(function () { // use a timer for performance
            if($window.scrollTop() <= top) // hide if at the top of the page
            {
                displayed = false;
                $message.fadeOut(500);
            }
            else if(displayed == false) // show if scrolling down
            {
                displayed = true;
                $message.stop(true, true).show().click(function () { $message.fadeOut(500); });
            }
        }, 100);
    });
});

see the example from the below site :

http://briancray.com/2009/10/06/scroll-to-top-link-jquery-css/