1. 前言
随着小程序的不断发展，越来越多的人开始使用它。在小程序中，我们经常需要在页面中添加一个回到顶部的按钮，以便于快速返回顶部。目前，小程序中实现回到顶部的方式有两种。本文将会详细介绍这两种方式的实现方法。
2. 方式一：使用 scroll-view 组件
在小程序中，我们可以使用 scroll-view 组件来实现滚动功能。该组件提供了回到顶部的方法。具体实现方式如下：
2.1. 在 wxml 文件中添加 scroll-view 组件
<scroll-view scroll-y="true" bindscrolltoupper="onScrollToUpper">
<!-- 此处省略 scroll-view 中的内容 -->
</scroll-view>
说明：
scroll-y="true" 表示启用纵向滚动，bindscrolltoupper="onScrollToUpper" 表示绑定滚动到顶部的方法。
2.2. 在 js 文件中实现回到顶部的方法
Page({
onScrollToUpper: function () {
wx.pageScrollTo({
scrollTop: 0
})
}
})
说明：
使用 wx.pageScrollTo() 方法实现页面滚动到顶部。其中，scrollTop 参数表示滚动条距离顶部的偏移量。当 scrollTop 设置为 0 时，即表示滚动到顶部。
3. 方式二：使用 button 组件
除了使用 scroll-view 组件，我们还可以使用 button 组件来实现回到顶部的功能。具体实现方式如下：
3.1. 在 wxml 文件中添加 button 组件
<button class="back-to-top" bindtap="backToTop" hover-class="btn-hover">回到顶部</button>说明：
bindtap="backToTop" 表示绑定点击按钮后的回调方法。
3.2. 在 wxss 文件中添加样式
.back-to-top {
position: fixed;
bottom: 30rpx;
right: 30rpx;
width: 80rpx;
height: 80rpx;
background-image: url('/images/back-to-top.png');
background-size: 100% 100%;
border-radius: 50%;
}
.btn-hover {
background-color: #999;
color: #fff;
}
说明：
使用 position: fixed; 让按钮固定在页面中，使用 background-image 添加背景图片，使用 border-radius: 50% 实现圆形按钮。
3.3. 在 js 文件中实现回到顶部的方法
Page({
backToTop: function () {
wx.pageScrollTo({
scrollTop: 0
})
}
})
说明：
使用 wx.pageScrollTo() 方法实现页面滚动到顶部。其中，scrollTop 参数表示滚动条距离顶部的偏移量。当 scrollTop 设置为 0 时，即表示滚动到顶部。
4. 总结
本文介绍了小程序中两种回到顶部的实现方式。其中，使用 scroll-view 组件的方式是通过在 scroll-view 组件中绑定滚动到顶部的方法来实现，使用 button 组件的方式是通过在 button 组件中绑定点击后的回调方法来实现。