微信小程序回到顶部

一.在view下面使用直接使用，没有在scroll-view下面使用

wxml页面，catchtap阻止冒泡事件。

   <view class="back-top" catchtap="goTopOn" hidden='{
   
   {!cangotop}}'>
    <van-icon name="back-top" size="60rpx"/>
   </view>

wxss界面

.back-top{
  position: fixed;
  right: 40rpx;
  bottom: 90rpx;
  height: 90rpx;
  width: 90rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center; 
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.3) ;
}

js界面

 // 获取滑动位置
 onPageScroll: function (e) {
    //当页面滑动距离大于一屏的高度时显示回到顶部控件
   this.setData({
       cangotop: e.scrollTop > wx.getSystemInfoSync().windowHeight ? true : false
      });
  },
    //回到顶部，内部调用系统API
    goTopOn: function (e) {
      if (wx.pageScrollTo) {
          wx.pageScrollTo({
              scrollTop: 0
          })
      } else {
          wx.showModal({
              title: '提示',
              content: '当前微信版本过低，暂无法使用该功能，请升级后重试。'
          })
      }
    }

二.在scroll-view下面使用

wxml页面 scroll-with-animation：使用滚动动画过渡

<scroll-view class="cate" scroll-y="true"  bindscroll="srollViewTop" scroll-into-view="{
   
   {top}}" scroll-with-animation="true">
 <view class="back-top" catchtap="goTopOn" hidden='{
   
   {!cangotop}}'>
    <van-icon name="back-top" size="60rpx"/>
 </view>
</scroll-view>

wxss界面

 .back-top{
  position: fixed;
  right: 40rpx;
  bottom: 120rpx; 
  height: 90rpx;
  width: 90rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.3) ;
}

js界面：

 data:{
    topNum: 0
  }
  srollViewTop(e){
       this.setData({
        cangotop: e.detail.scrollTop > wx.getSystemInfoSync().windowHeight-180 ? true : false
    });
  },
  // 回到顶部
  goTopOn: function () {
    this.setData({
        topNum:0
    })
  }