效果演示：

前台代码：

<view class="com-widget-goTop" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun">
   <view class="icon-gotop" >
         <i class="fa fa-arrow-up " aria-hidden="true">顶部</i>
    </view>
</view>

js代码：

Page({
    onPageScroll(e){
            //触发goTop的显示条件
            if(e.scrollTop > 300){
                this.setData({
                    'scrollTop.goTop_show': true
                });
            }else{
                this.setData({
                    'scrollTop.goTop_show': false
                });
            }
        },
        goTopFun(e){
            console.log(this.data);
            wx.pageScrollTo({
                scrollTop: 0,
                duration: 300
            })
        }
)}

wxss代码：

/*goTop回到顶部图标start*/
.com-widget-goTop {
    position: fixed;
    bottom: 125px;
    right: 5px;
    background: rgba(0,0,0,0.48);
    border-radius: 50%;
    overflow: hidden;
    z-index: 500;
}
.com-widget-goTop .icon-gotop{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width: 50px;
    height: 50px;
    font-size: 12px;
    color: #fff;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.8);
    -webkit-background-size: 50px auto;
}

评论