页面回到顶部

多话不说，直接上代码，简单易懂

1.首先 .wxml 代码

<!-- 回到顶部 -->
<view class='goTop' hidden='{{showTop}}' bindtap='goTop'>
  <image src='../../resources/images/goTop.png'></image>    <!-- 图片按钮为图片+背景 -->
</view>

2.其次 .wxss 代码

.goTop{       /* 背景样式设置 */
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  position: fixed;
  bottom: 100rpx;
  right: 30rpx;
  background: #000000;
  opacity:0.5;
}
.goTop image{     /* 向上图片样式设置 */
  width: 60rpx;
  height: 60rpx;
  position: relative;
  top: 15rpx;
  left: 15rpx;
}

3.页面滚动时触发的事件

onPageScroll:function(e){
    //console.log(e.scrollTop);   //当前页面的高度
    if (e.scrollTop >= 400){        //当前单位为 px
      this.setData({
        showTop:false
      });
    }
    else{
      this.setData({
        showTop: true
      });
    }
  },

4.回到顶部按钮出现后，点击事件触发

  //点击回到顶部按钮
  goTop:function(){
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300        //300ms回到顶部
    })
  },