回到顶部BackTop
页面导航在长页面中快速返回顶部
回到顶部按钮通常在用户向下滚动一段距离后出现，适合没有便捷目录的长页面。它不能遮挡聊天、提交等重要入口，短页面一般不需要。
什么时候用
- 超长页面滚到底，一键回顶部↑
- 列表逛完回顶部换筛选条件全部状态↑
- 手机端长页，单手也能够到↑
- 滚动一段距离后才浮现，平时不碍事↑滚动超过一屏才出现
什么时候不用
- 页面只有一屏 → 根本没地方滚
- 按钮挡住右下角的操作区提交↑
- 做得又小又淡，找不到也点不中↑
- 给它塞一堆别的功能，一个按钮一件事☰?
组成结构 · Anatomy
1页面区域Viewport滚动超过一屏左右，按钮才浮现
2悬浮按钮FloatButton固定右下角，点击平滑滚回顶部
3图标Icon一个向上的箭头就够，别加多余文案
常见变体 · Variants
圆形按钮Circle
右下角的标准样式,不知道选啥就用它
方形按钮Square
界面偏方正时,和其他按钮风格统一
带文案With Text
怕用户看不懂箭头,直接写上「顶部」
典型使用场景
电商商品列表
🎧
降噪耳机 Pro
¥ 899
🎒
户外双肩包
¥ 239
长文阅读页
山系生活：周末徒步装备清单
阅读 3.2k · 约 8 分钟
↑
移动端信息流
↑
文档站点