网页返回顶部按钮功能怎么写

1.在页面body底部加入代码

#这里引用了font-awesome字体图标
<div class="backTop">
    <button class="btn btn-inverse">
        <i class="fa fa-chevron-up"></i>
    </button>
</div>

2.加入css样式

/*backTop*/
.backTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    width: 50px;
    display: none;
}
.backTop .btn {
    margin-top: 2px;
    height: 50px;
    display: block;
    padding: 0;
    width: 100%;
    opacity: .4;
}
.btn-inverse {
    background: #666;
    color: #FFF !important;
}
.backTop .btn:hover {
    background: #999;
    opacity: .9;
    color: #FFF !important;
}
.backTop .btn i {
    position: relative;
    top: -1px;
}

3.加入js脚本

#滚动到80px高度展示按钮
$(window).scroll(function() {
    document.documentElement.scrollTop + document.body.scrollTop > 80 ?
        $('.backTop').fadeIn() :
        $('.backTop').fadeOut();
});
$(".backTop").on("click", function() {
    scrollToTop();
});
function scrollToTop(dom, speed) {
    if (!speed) speed = 300;
    var top = 0;
    if (dom && dom.length > 0) top = dom.offset().top;
    $('html,body').animate({
        scrollTop: top
    }, speed)
}