小程序回到顶部

<scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}' bindscroll="scrolltoupper">
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
  <view>5</view>
  <view>6</view>
  <view>7</view>
  <view>8</view>
  <view>9</view>
  <view>10</view>
</scroll-view>

<view class='goTop' hidden='{{!floorstatus}}' bindtap="returnTop">顶部</view>

采用 scroll-view 标签形式的回到顶部，通过 scroll-top获取可滚动区块向下滚动的距离。bindscroll 滚动时触发，scroll-with-animation：在设置滚动条位置时使用动画过渡，一般默认为false。小程序开发文档

CSS:

page{
  width: 100%;
  height: 100%;
}

scroll-view{
  height: 100%;
  width: 100%;
}

view{
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-weight: 600;
}

view:nth-child(odd){
  background-color: red;
}

.top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  background-color: yellow;
  color: red;
  text-align: center;
  line-height: 50px;
}

JS:

data: {
    topNum: 0
},

// 获取滚动条当前位置
  scrolltoupper:function(e){
    console.log(e)
    var floorstatus = e.detail.scrollTop > 100 ? true : false
    this.setData({
      floorstatus: floorstatus
    })
    // if (e.detail.scrollTop > 100) {
    //   this.setData({
    //     floorstatus: true
    //   });
    // } else {
    //   this.setData({
    //     floorstatus: false
    //   });
    // }
  },

//回到顶部
  returnTop: function () {
    this.setData({
      topNum: this.data.topNum = 0
    });
  },