微信小程序回到顶部

关于web网站的回到顶部设置，请移步《JavaScript实现网页带动画返回顶部》

微信小程序回到顶部的原理和web网站的原理是一样的，都是通过滚动条的位置来判断。

废话不多说，直接上代码：

Index.wxml

<view class="container">
  <scroll-view scroll-y bindscroll="scroll" style="height: 100%">
    <!-- 页面内容 -->
  </scroll-view>

  <view class="back-to-top" bindtap="backToTop">回到顶部</view>
</view>

Index.wxss

.container {
  position: relative;
}

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #ff6600;
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  display: none;
}

.show {
  display: block;
}

Index.js

Page({
  data: {
    showBackToTop: false
  },

  scroll(e) {
    if (e.detail.scrollTop > 100) {
      this.setData({
        showBackToTop: true
      })
    } else {
      this.setData({
        showBackToTop: false
      })
    }
  },

  backToTop() {
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  }
})

原理解析

1. 在页面容器中，使用<scroll-view>来监听用户滚动事件，并绑定scroll事件处理函数。
2. 在滚动事件处理函数中，根据滚动条的当前位置来判断是否显示“回到顶部”按钮。当滚动条的位置大于100px时，显示“回到顶部”按钮，否则隐藏。
3. 当用户点击“回到顶部”按钮时，调用wx.pageScrollTo()方法，将滚动条的位置滚动到顶部。

注意

1. scroll-view组件只能监听垂直方向的滚动事件，如果需要监听水平方向的滚动事件，需要使用<swiper>组件。
2. wx.pageScrollTo()方法只能滚动到页面的顶部，如果需要滚动到其他位置，可以使用wx.createSelectorQuery()方法来获取元素的位置，然后使用wx.pageScrollTo()方法滚动到该元素的位置。