一,在view形式下滾動後回到頂部 

JS程式碼片段：

// 獲取滾動條當前位置
  onPageScroll: function (e) {
    console.log(“列印當前頁面滾動的距離=”+e)

 console.log(e)
    if (e.scrollTop > 100) {//頁面距離大於100px,則顯示回到頂部控制元件
      this.setData({
        cangotop: true
      });
    } else {
      this.setData({
        cangotop: false
      });
    }
  },

  //回到頂部，內部呼叫系統API
  goTop: function (e) {  // 一鍵回到頂部
    if (wx.pageScrollTo) {

//   //wx.pageScrollTo(OBJECT)
//   基礎庫 1.4.0 開始支援，低版本需做相容處理
// 將頁面滾動到目標位置。
//   OBJECT引數說明：
//   引數名	型別	必填	說明
// scrollTop	Number	是	滾動到頁面的目標位置（單位px）
//   duration	Number	否	滾動動畫的時長，預設300ms，單位 ms
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '當前微信版本過低，暫無法使用該功能，請升級後重試。'
      })
    }
  },
 

 css樣式：該控制元件放置於右下角。

.gotop{
position:fixed;
right:30rpx;
bottom:50rpx;
height:60rpx;
width:100rpx;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
text-align:center;
color:white;
font-size:21rpx;
font-weight:bold;
background:#a78e72;

}

 wxml頁面：catchtap阻止冒泡事件。

<view class="gotop" hidden='{{!cangotop}}'catchtap="goTop">
  <view>回到頂部</view>
</view>
 

2，在scroll-view形式下回到頂部

<scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
<view class="gotop" hidden='{{!cangotop}}'catchtap="goTop">
  <view>回到頂部</view>
</view>
  </scroll-view>

JS頁面程式碼段: 

 data:{
    topNum: 0
  }

  // 獲取滾動條當前位置
  scrolltoupper:function(e){
    console.log(e)
    if (e.detail.scrollTop > 100) {
      this.setData({
        cangotop: true
      });
    } else {
      this.setData({
        cangotop: false
      });
    }
  },

  //回到頂部
  goTop: function (e) {  // 一鍵回到頂部
    this.setData({
      topNum:0
    });
  },