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

dhso
2016/10/31 16:00
统计中
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)

}

本文为 dhso 原创

发布在 http://blog.minws.com/wang-ye-fan-hui-ding-bu-an-niu-gong-neng-zen-yao-xie-2/

如有转载,请标明来源!

作者信息
姓名:dhso
热评文章
最新评论
文章概览