小程序-回到顶部

示例

soogif.gif

wxml

绑定一个goTop方法，hidden会判断是否需要显示（当前页面在顶部就隐藏，否则就显示）。

<view class='goTop' hidden='{{!floorstatus}}' bindtap="goTop">回到顶部</view>

css

使用fiexd，将按钮固定在右下角

/* 返回顶部 */
.goTop{
  height: 80rpx;
  width: 80rpx;
  position: fixed;
  bottom: 50rpx;
  background: rgba(0,0,0,.3);
  right: 30rpx;
  border-radius: 50%;
}

js

• onPageScroll：方法，每次页面滚动都会出发，拿到距离顶部的距离，如果距离顶部大于100，就显示“回到顶部”按钮，否则就不显示。
• goTop：回到顶部，设置距离顶部0。

  // 获取滚动条当前位置
  onPageScroll: function(e) {
    let isTop = e.scrollTop > 100;
    this.setData({
      floorstatus: isTop ? true : false
    });
  },

  //回到顶部
  goTop: function(e) { // 一键回到顶部
    if (wx.pageScrollTo) {
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  },

参考

• 小程序开发文档-Page