微信小程序：一键回到顶部【返回顶部】

先看案例：

想要好看的图标可借鉴：小程序中如何使用阿里图标

直接上代码：

.wxml文件代码

     <view class='goTop' hidden='{{!scrollTop}}' bindtap="goTop">
	   <!-- 这里可以换成你想要的图案或图标 -->
	   <image style="height:50rpx;width: 50rpx;padding-top: 2rpx;" src="../../images/icon/back-to-top.png"></image>
     </view>

.wxss文件代码

.goTop{
    height: 80rpx;
    width: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 200rpx;
    background: rgba(0,0,0,.3);
    right: 80rpx;
    border-radius: 50%;
    z-index: 9;
}

.js文件代码

	/**
     * 页面的初始数据
     */
    data: {
        scrollTop: false, // 返回顶部
    },
     // 返回顶部function
    goTop () {
        if (wx.pageScrollTo) {
            wx.pageScrollTo({ scrollTop: 0 })
        } else {
            wx.showModal({
                title: '提示', content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
            })
        } 
    },

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

关键代码：

	// 设置滚动条位置为0
	wx.pageScrollTo({
		scrollTop: 0
	})