jQuery返回顶部的按钮

 

HTML结构：

<script type="text/javascript" src="../js/jquery-1.8.3/jquery.js"></script>

body里的代码：

<div class="hulubo">
    <a href="javascript:"></a>
</div>

css结构：

.hulubo{left:1180px;
bottom:69.8px;
right:auto;
position:fixed;
z-index: 199999;}
.hulubo a{position:absolute;
height:58px;width:58px;
background:url(../images/gotop.png)no-repeat scroll;background-position:center;background-size: 58px 58px;}

直接改宽高和背景图片就可以了

jQuery代码：

$(function(){  
    var $btn_top = $('.hulubo');  
12     $("body").append($btn_top);  
    $("body").on("click",".hulubo",function(){  
        $("html,body").animate({scrollTop: 0},"slow");  
    });  
    var $btn = $(".hulubo");  
    if($(window).scrollTop() > 100){  
        $btn.fadeIn(600);  
    }  
    $(window).scroll(function(){  
        if($(window).scrollTop() > 100){  
            $btn.fadeIn(600);  
        }else{  
            $btn.fadeOut(600);  
        }  
    });  
});