小程序返回頂部top滾動

demo.js

var c = getApp();
Page({
   data:{
        // top標籤顯示（默認不顯示）
        backTop:0 
  }, 
  // 監聽滾動條座標
  onPageScroll: function (e) {

    var that = this;
    var scrollTop = e.scrollTop;
    //當監聽滾動到500時，顯示置頂按鈕
    var backTopValue = scrollTop > 500 ? 1 : 0;
    that.setData({
      backTop: backTopValue
    })
  },
  
  // 滾動到頂部
  backTop:function(){
    // 回到頂部
      wx.pageScrollTo({
        scrollTop: 0
      })
  }

})

demo.wxml

<button bindtap="backTop" class="backTop" wx:if="{{backTop==1}}">
  <image mode="aspectFit" src="https://test1858.qcyx1858.com/attachment/images/xcx/images/share-white.png"></image>
  <view>置頂</view>
</button>

demo.wxss

.zhid{
    display: inline-block;
    bottom: 31%;
    right: 30rpx;
    width: 80rpx;
    height: 80rpx;
    position: fixed;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    font-size: 20rpx;
    padding: 10rpx;
    line-height: 1.2;
    z-index: 100;

}
.zhid image{
   width: 50%;
    height: 50%;
}