使用 `scroll-view` 组件的 `scroll-top` 属性回到顶部，核心是通过动态修改 `scroll-top` 的值（设置为 `0`）来触发滚动到顶部的行为。具体步骤如下：
### 1. 基础用法（固定触发）
在 WXML 中定义 `scroll-view` 组件，并绑定 `scroll-top` 属性到页面数据中的变量（如 `scrollTop`），同时添加一个触发回到顶部的按钮。
#### WXML 代码：
```xml
class="scroll-container"
scroll-y
scroll-top="{{scrollTop}}"
>
```
#### JS 代码：
```javascript
Page({
data: {
scrollTop: 0 // 初始滚动位置为0（顶部）
},
// 回到顶部的方法：将 scrollTop 设置为0
backToTop() {
this.setData({
scrollTop: 0 // 修改 scroll-top 的值，触发滚动到顶部
})
}
})
```
#### WXSS 代码（基础样式）：
```css
.scroll-container {
height: 100vh; /* 必须设置固定高度，否则无法滚动 */
}
.item {
height: 100rpx;
line-height: 100rpx;
border-bottom: 1px solid #eee;
}
.top-btn {
position: fixed;
bottom: 50rpx;
right: 30rpx;
z-index: 99;
}
```
### 2. 进阶：结合滚动监听动态控制
如果需要在滚动一定距离后才显示“回到顶部”按钮，可以监听 `scroll-view` 的 `scroll` 事件，记录当前滚动位置，再动态控制按钮显示/隐藏。
#### 优化后的 WXML：
```xml
class="scroll-container"
scroll-y
scroll-top="{{scrollTop}}"
bindscroll="onScroll"
>
bindtap="backToTop"
class="top-btn"
wx:if="{{showTopBtn}}"
>
回到顶部
```
#### 优化后的 JS：
```javascript
Page({
data: {
scrollTop: 0,
showTopBtn: false // 按钮初始隐藏
},
backToTop() {
this.setData({
scrollTop: 0
})
},
// 监听滚动事件，记录滚动距离
onScroll(e) {
// 获取当前滚动位置（单位：px）
const scrollTop = e.detail.scrollTop;
// 当滚动距离 > 300px 时显示按钮，否则隐藏
this.setData({
showTopBtn: scrollTop > 300
})
}
})
```
### 关键注意事项：
1. **必须设置滚动方向**：`scroll-view` 需添加 `scroll-y`（纵向滚动）或 `scroll-x`（横向滚动），否则无法滚动。
2. **固定高度**：`scroll-view` 必须通过 WXSS 设置固定高度（如 `height: 100vh`），否则内容会撑开容器，无法触发滚动。
3. **`scroll-top` 的重置**：若需要重复触发回到顶部（比如滚动后再次点击），直接设置 `scrollTop: 0` 即可，无需额外重置逻辑。
4. **与页面滚动的区别**：`scroll-view` 的滚动是组件内部的滚动，与页面（`window`）滚动无关，因此不会触发页面级的 `onPageScroll` 事件。
通过以上方式，即可利用 `scroll-view` 的 `scroll-top` 属性实现点击回到顶部的功能，且可根据需求扩展显示/隐藏逻辑。
上一篇：微信小程序页面至顶方式
