最近 Tim 在维护微信小程序，在查看商品详情的时候发现，用户体验有些问题，再查看了长长的商品详情，想要查看顶端的参数，十分不便，于是打算追加一个返回顶部的小功能。

于是网上针对此方法，大多有两种，一种是 wx.pageScrollTo 另一种是 scroll-view来监听scroll。于是查看了方法分享，不过尝试了第一种，即实现了简单需求，于是暂没有尝试第二种，以后尝试了在分享，先分享第一种已测ok好用，可扫描识别下图进入，查看宝贝详情查看（也可以顺便另个红包，买个小海鲜尝尝）

干货，干货，干货，实操分享（3步即可）

wxml部分、wxss部分、js部分直接用到即可

wxml部分

<image src='图片地址' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

wxss部分

.goTop{
height: 80rpx;
width: 80rpx;
position: fixed;
bottom: 150rpx;
1background: rgba(0,0,0,.3);
right: 30rpx;
border-radius: 50%;
}

js部分

  // 获取滚动条当前位置
  onPageScroll: function (e) {
    console.log(e)
    if (e.scrollTop > 100) {
      this.setData({
        floorstatus: true
      });
    } else {
      this.setData({
        floorstatus: false
      });
    }
  },
//回到顶部 wx.pageScrollTo
  goTop: function (e) {  // 一键回到顶部
    if (wx.pageScrollTo) {
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  },

这3步，轻松搞定，可以即使使用了，也可以查看我们的实际例子，下面就赶快实际操练起来把。