js+css实现回到顶部按钮（back to top）

转自：http://www.jb51.net/article/80304.htm

修改了部分，然后直接复制粘贴即可用(放的位置你高兴就好)

需要材料：http://fontawesome.io/   (下载这个icon库)

<style>
    p#back-to-top{
        position:fixed;
        bottom:18px;
        right:12px;
    }
    p#back-to-top a{
        text-align:center;
        text-decoration:none;
        color:#000;
        display:block;
        width:30px;
        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
        -moz-transition:color1s;
        -webkit-transition:color1s;
        -o-transition:color1s;
    }
    p#back-to-top a:hover{
        color:#000011;
    }
    p#back-to-top a span{
        background-color:#ffffff;
        z-index: -100;
        border: 1px solid #cccccc;
        border-radius:6px;
        display:block;
        height:30px;
        width:30px;
        margin-bottom:5px;
        /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
        -moz-transition:background1s;
        -webkit-transition:background1s;
        -o-transition:background1s;
    }
    #back-to-top a:hover span{
        background-color:#f0f0f0;
    }
</style>
<p id="back-to-top"><a href="#top"><span><i class="fa fa-chevron-up" aria-hidden="true"></i></span></a></p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        //首先将#back-to-top隐藏
        $("#back-to-top").hide();
        //当滚动条的位置处于距顶部600像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>600){
                    $("#back-to-top").fadeIn(500);
                }else{
                    $("#back-to-top").fadeOut(500);
                }
            });
            //当点击跳转链接后，回到页面顶部位置
            $("#back-to-top").click(function(){
                $('body,html').animate({scrollTop:0},500);
                return false;
            });
        });
    });
</script>