jquery返回顶部经典代码

jquery部分：

$(function(){
    var w1 = 1100;//页面宽度
    var w2 = $(window).width();
    var w3 = (w1+w2)/2;

    var $gotop = $('<a href="#"  class="gotop" style="position:fixed; bottom:50px;">返回顶部</a>');
    if(w1 < w2){
        $gotop.css('left', w3 );
    }else{
        $gotop.css('right', 0 );
    }
    $("body").append($gotop);//向body底部 加入 返回顶部 链接
    
    $(window).scroll(function(){
        var h = $(document).scrollTop();   
        if( h < 100){
            $gotop.fadeOut();;
        }else{
            $gotop.fadeIn(); 
        }
    }).scroll();
    
    $gotop.click(function() {
           $("body,html").animate({scrollTop:0},800);
           return false;
    });
});

css 改变外观：

.gotop{width:40px; height:40px; background:url(gotop.png) no-repeat 0px 0px;}
.gotop:hover{ background-position:0px -50px;}

gotop.png :