当页面下拉一定距离的时候出现一个图标点击图标回到页面顶部

html代码

<section class="footer-popup">
    <a class="side_btn top" id="back-to-top" href="javascript:;" title="返回顶部"
       style="display: none;
            width: 45px;
            height: 45px;
            background:url(/home/default/images/top_bg.png) no-repeat -1px -47px;">
    </a>
</section>

js代码

<script>
    $(window).scroll(function () {
        //获取滚动条距离顶部高度
        var scrollTop = $(window).scrollTop();
        //滚动条距离顶部高度为300的时候出现图标
        scrollTop > 300 ? $("#back-to-top").fadeIn(200).css("display","block") : $("#back-to-top").fadeOut(200);
    });
    //返回顶部
    $('#back-to-top').click(function (e) {
        $('html,body').animate({ scrollTop:0});
    });
</script>