微信小程序返回到顶部功能的简单实现

<view class="page">
<!-- 返回顶部按钮 -->
  <view class="nav" bindtap="backTop" wx:if="{{isTop}}">返回顶部</view>
  <!-- 内容 -->
  <view class="text" id="pos">
    展示顶部返回按钮
  </view>
</view>

.page {
  width: 100%;
  height: 1500px;
  background: linear-gradient(to bottom, red, blue, #fff, yellow);
  padding-top: 700rpx;
}

.nav {
  position: fixed;
  right: 10rpx;
  bottom: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70rpx;
  height: 100rpx;
  padding: 10rpx;
  background: rgb(216, 148, 148);
  border-radius: 10rpx;
}

.text {
  margin-top: 500rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

Page({
  data: {
    //滑动的指定距离，用于作为返回顶部标记改变的界点
    top: 0,
    // 返回顶部标记，顶部标记为true则返回顶部按钮显示，顶部标记为false，则返回顶部按钮不展示
    isTop: false
  },
  
  backTop() {
    //这是微信小程序给我们提供的页面滚动API方法
    wx.pageScrollTo({
      // 页面滚动的距离
      scrollTop: 0,
      // 滚动动画执行时间，我们这里就让他执行100毫秒
      duration: 100
    })
  },

  
  onPageScroll(e) {
    // 使用es6的方式页面滚动的event对象中的滚动距离scrollTop变量解构出来
    let {
      scrollTop
    } = e;
    // 将滑动的指定距离变量和是否显示返回顶部按钮标记也解构出来
    let {
      top,
      isTop
    } = this.data;
    // 判断当前滚动的距离是否大于等于我们设定的滑动的指定距离且当前返回顶部按钮标记为false
    if (scrollTop >= top && !isTop) {
      // 进入则表示滑动达到了指定位置，我们将返回顶部标记改为true将返回顶部按钮进行展示出来
      this.setData({
        isTop: true
      })
    } else {
      // 如果上述条件则表示要么是未达到执行位置或者已经返回顶部标记为true了，所以我们这里需要在判断一下，当前的滚动距离是否小于我们设定的指定滑动距离和当前返回顶部标记是否为true，这样我们就只判断当前滑动到指定位置和滑动小于指定位置，如果大于滑动指定位置我们就不做处理
      if (scrollTop <= top && isTop) {
        // 如果小于滑动指定距离，我们就将返回顶部按钮显示标记改为false
        this.setData({
          isTop: false
        })
      }
    }
  },
  

  query(id, fn) {
    // 通过微信的方式进行获取元素对象进行操作，接受值为id，我们用回调函数进行处理
    let query = wx.createSelectorQuery();
    query.select(id).boundinGClientRect()
    query.selectViewport().scrollOffset()
    query.exec(fn)
  },

  onLoad() {
    // 我们将当前页面中的内容id传递进去，通过内容距离顶部的高度，设置滑动的指定距离
    this.query("#pos", (e) => {
      let {
        top
      } = e[0];
      this.setData({
        top
      })
    })
  }
})