微信小程序回到顶部的两种方式【转藏】

wxss

/* 返回顶部 */
.goTop{
    height: 80rpx;
    width: 80rpx;
    position: fixed;
    bottom: 50rpx;
    background: rgba(0,0,0,.3);
    right: 30rpx;
    border-radius: 50%;
}

js

需要初始一个值：floorstatus:false,

 // 获取滚动条当前位置
    onPageScroll: function (e) {
        console.log(e)
        if (e.scrollTop > 100) {
            this.setData({
                floorstatus: true
            });
        } else {
            this.setData({
                floorstatus: false
            });
        }
    },

    //回到顶部
    goTop: function (e) {  // 一键回到顶部
        if (wx.pageScrollTo) {
            wx.pageScrollTo({
                scrollTop: 0
            })
        } else {
            wx.showModal({
                title: '提示',
                content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
            })
        }
    },

wxml

<image  class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>