示例

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

原著是一个有趣的人,若有侵权,请通知删除