完成返回顶部案例

html代码

<a href="#top"></a>
<div></div>
<p id="back"><a href="" id="top"><i class="fa fa-arrow-circle-up"></i><br>返回顶部</a></p>

css代码

<style type="text/css">
    div{width: 1200px;height:1500px;margin:0 auto;background: #ccc;}
    p{width:60px;height: 52px;background: #999;position: fixed;bottom:10px;right:10px;text-align:center;padding-top:8px;display: none;}
    p:hover{background: #bbb;}
    a{text-decoration: none;color:#fff;font-size:12px;}
</style>

js代码

<script type="text/javascript">
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop()>100){
                $('#back').fadeIn(300);
            }else{
                $('#back').fadeOut(300);
            }
        });
    })
</script>

效果图