h5浮動按鈕

一、css

.topBtn{
    position: fixed;
    bottom: 5rem;
    right: 0.8rem;
    width: 2.2rem;
    height: 2.2rem;
    background: url(../image/topBtn.png) no-repeat center;
    background-size: 100% auto;
    z-index: 9999;
    -webkit-transition:  opacity .3s ease;
}

二、js根據ID，滾動到頂部

$('#content').animate({scrollTop: '0px'}, 100);

三、根據vue加入頁面滾動監聽事件，判斷浮動按鈕是否顯示

/**
 * 初始化頁面視圖
 *
 * @author xiaohei 2019-05-09
 */
function fnInitView() {
    vm = new Vue({
        el: ".wrap",
        data: {
            isTop: false,//跳轉頂部按鈕是否顯示
        },
        methods: {
            handleScroll(){
                let page = document.getElementById('content');
                console.log(page.scrollTop,page.clientHeight,page.scrollTop+page.clientHeight,page.scrollHeight);
                if(page.scrollTop >= page.clientHeight/2){
                    this.isTop = true;
                } else {
                    this.isTop = false;
                }
            },
        },
        mounted(){
            document.getElementById('content').addEventListener('scroll',this.handleScroll);
        },
        beforeDestroy(){
            document.getElementById('content').removeEventListener('scroll', this.handleScroll);
        }
    });
}