小程序回到顶部

Index.wxml

<image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />

Index.wxss

.go_top{
  position: fixed;
  bottom: 70px;
  right: 12px;
  width: 40px;
  height: 40px;
}

Index.js

Page({
  data: {
    scrollHeight: wx.getSystemInfoSync().windowHeight,
    // 是否显示回到顶部图标
    visual: false,
  },
  
  
/**
   * 点击回到顶部图片方法
   */
  scrollToTop() {
    if (wx.pageScrollTo) {//判断这个方法是否可用
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  },
  /**
   * 实时监听滚动条位置,显示/不显示回到顶部图片
   */
  onPageScroll:function(e) {
    let scrollTop = e.scrollTop
    if (scrollTop < this.data.scrollHeight / 2) {
      this.setData({
        visual: false
      })
    } else {
      this.setData({
        visual: true
      })
    }
  }
})