微信小程序：一键回到顶部功能（原生）

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

属性	描述
scrollTop	滚动到页面的目标位置，单位 px
duration	滚动动画的时长，单位 ms
selector	选择器
offsetTop	偏移距离，需要和 selector 参数搭配使用，可以滚动到 selector 加偏移距离的位置，单位 px
success	接口调用成功的回调函数
fail	接口调用失败的回调函数

 

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

小知识点：

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;
}