微信小程序：一键回到顶部功能（原生）_微信小程序开发触发顶部事件

实现一键回到顶部主要用到 wx.pageScrollTo(Object object) 
该方法可实现将页面滚动到目标位置，支持选择器和滚动距离两种方式定位。

微信小程序官方参考文档说明，可查看 官方文档说明

小知识点：

bindtap和catchtap的区别

• 相同点
  首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。
• 不同点
  他们的不同点主要是一个是冒泡的，一个是非冒泡的

所以我们要避免冒泡事件发生即使用：catchtap

wxml 代码：

<view>
    <scroll-view scroll-y scroll-top='{{scrollTop}}' bindscroll="scrolltoupper">
        <view class="top-btn flex-center" hidden='{{!isTop}}' catch:tap="goTop">
          <image src="bg.png?" />
        </view>
    </scroll-view>
</view>

js 代码：

const app = getApp()
Page({
   data: {
       data: {
            scrollTop: 0, 
            isTop: false, 
       }
   },
 
   onPageScroll: function (e) {
    let _this = this;
    _this.setData({
        isTop: e.scrollTop > wx.getSystemInfoSync().windowHeight - 800 ? true : false
    });
  },
  goTop: function(){
    if (wx.pageScrollTo) {
        wx.pageScrollTo({
            scrollTop: 0
        })
    } else {
        wx.showModal({
            title: '提示',
            content: '当前微信版本过低，暂无法使用该功能，请升级后重试。'
        })
    }
  },
})

wxss 代码：

.top-btn{
  position: fixed;
  width: 140rpx;
  height: 92rpx;
  right: 20rpx;
  bottom: 60rpx;
}
 
.top-btn image{
  width: 70rpx;
  height: 70rpx;
}