携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
前置问题
在我最近写的一个项目中就有这样的一个需求，即无限滚动卡片列表中实现回到顶部，与已往的返回顶部功能不同，因为是通过scroll-view来实现的无限列表滚动，所以返沪顶部需要依靠scroll-view的一些特定属性和api，下面我将带大家分析，实现这个功能。
功能展示
我们先搞懂整体的功能最后实现起来是怎么样的，来看图！
这张动图展现的是该功能的成品，大概的需求是这样的：
我们开始滚动的时候，返顶按钮是隐藏的，当我们向下滚动的时候按钮是出现的，而当滚动的时候控制台也会滚动出一些东西，这里下面会提到，了解完需求后，是时候来分析一波了~
真相只有一个！
具体分析
大家肯定彻底了解这个功能，那么将整体的功能拆分一下，就会得到三个实现步骤。
- 列表滚动的时候，按钮是需要固定在页面的某个位置上，不随列表滚动
- 初始状态时需要隐藏返回顶部按钮，当滚动到一定距离的时候显示返回顶部按钮
- 点击返回顶部按钮，列表的可视区域会滚动到开始位置。
总结起来这三个问题，分别是按钮的固定悬浮，控制按钮的显示与隐藏以及回到顶部，下面来一一介绍三个要点的实现。
按钮的固定悬浮
悬浮按钮的固定主要是依靠position:fixed完成的，fixed可以让元素以窗口为参照点进行定位，所以可以控制元素在屏幕上的位置固定不变，下面我拿码上掘金的代码块来复现按钮的固定悬浮及其样式
按钮的显示与隐藏
这个功能是这个样子的，在顶部的时候，将按钮隐藏，在底部的时候将按钮显示，这个需要对滑块与顶部的距离进行监听，来控制按钮的显隐，所以需要两个东西，bindscroll与hidden
bindscroll
bindscroll可以绑定滚动监听函数，当滚动区域滚动的时候会触发绑定事件
<scroll-view class="enroll-page-container" scroll-y="true" bindscroll="onMonitor" scroll-left >
</scroll-view>
上面是一个简易的滚动区域，我们设定了onMonitor作为监听函数，当滚动的时候会实时触发，那么知道了这个滚动监听函数，问题就迎刃而解了，在函数内接受e参数，参数内包含了scroll-view的一个属性为scrollTop拿到这个属性后就可以根据滑动距离来控制按钮的显示与隐藏
onMonitor(e) {
if(e.detail.scrollTop > 150) {
this.setData({
isTop:false
})
}else {
this.setData({
isTop:true
})
}
},
hidden
为什么要使用hidden而不使用wx:if，这里大佬肯定能知道是为什么，hidden与wx:if的选用是根据场景来的，hidden能保留元素，wx:if不保留元素，所以如果元素需要频繁的显示与消失，为了避免节点的销毁与生成影响性能，所以必须使用hidden来控制。
回到顶部
回到顶部这个功能也需要搭配scroll-view的属性来实现，即scroll-top，距离顶部的距离，绑定变量后，添加回到顶部事件，将其置为0即可
trunTop() {
this.setData({
topDistance: 0
})
},
总结
每个需求的实现都需要整理，分析，拆分，根据每个要点的特性，在文档查找相关的api与属性，就能成功实现需求！
