回到顶部Back to Top Button
你可能会说
滚到很下面之后，右下角出个按钮一键回顶部。
回到顶部是让用户从长页面当前位置快速返回页首的导航按钮读完很长的帮助文章后可点击它回到目录。按钮不能遮挡聊天或提交入口；短页面和已有便捷目录的页面通常不需要。
也常被叫作BackTop
什么时候用
- 超长页面提供一次点击返回顶部↑
- 列表逛完回顶部换筛选条件全部状态↑
- 手机端长页，单手也能够到↑
- 滚动一段距离后才浮现，平时不碍事↑滚动到合适位置后出现
什么时候不用
- 页面较短或不需要频繁返回顶部时，通常不必加入此按钮
- 按钮挡住右下角的操作区提交↑
- 按钮尺寸过小且对比度不足，难以识别和点击↑
- 混入其他无关功能，会削弱返回顶部的明确含义☰?
组成结构 · Anatomy
滚动到页面较深处后，按钮再浮现
固定右下角，点击平滑滚回顶部
使用清楚的向上箭头；含义不明确时补充文字说明
常见变体 · Variants
圆形按钮Circle
适合常规页面的紧凑默认形态
方形按钮Square
界面偏方正时，与其他按钮风格保持一致
带文案With Text
需要明确说明按钮作用时
典型使用场景
电商商品列表
🎧
降噪耳机 Pro
¥ 899
🎒
户外双肩包
¥ 239
长文阅读页
山系生活：周末徒步装备清单
阅读 3.2k · 约 8 分钟
↑
移动端信息流
↑
文档站点