认导航
回到顶部
BackTop
「右下角的小箭头」「回到最上面」「滚回去的按钮」「向上那个浮标」「回顶按钮」「页面底下的小圆钮」「一键回顶部」
LIVE DEMO真实可交互,动手试试
第 1 行占位文本,向下滚动查看回到顶部按钮。
第 2 行占位文本,向下滚动查看回到顶部按钮。
第 3 行占位文本,向下滚动查看回到顶部按钮。
第 4 行占位文本,向下滚动查看回到顶部按钮。
第 5 行占位文本,向下滚动查看回到顶部按钮。
第 6 行占位文本,向下滚动查看回到顶部按钮。
第 7 行占位文本,向下滚动查看回到顶部按钮。
第 8 行占位文本,向下滚动查看回到顶部按钮。
第 9 行占位文本,向下滚动查看回到顶部按钮。
第 10 行占位文本,向下滚动查看回到顶部按钮。
第 11 行占位文本,向下滚动查看回到顶部按钮。
第 12 行占位文本,向下滚动查看回到顶部按钮。
- 英文名
- BackTop
- 别名 · 俗称
- 返回顶部回顶部按钮TOP 小按钮antd: BackTop
- Web 叫法
- BackTop
- 大白话定义
- 页面往下滚一段后,右下角浮出的小按钮,点一下嗖地回到最顶上。
- 部位拆解
- 悬浮按钮 Button常带向上箭头,固定在角落
- 滚动阈值 Threshold设定滚多远它才出现
- 回滚动画 Animation点击后平滑滚回顶部
提示词已按当前平台组织好,复制粘贴给 AI 即可
Web
在右下角加回到顶部按钮(BackTop),滚动超过 400px 才显示,点击平滑滚回页面顶部
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的回到顶部(BackTop)。逐一排除:页面实际滚动的是内层容器,却监听了 window 滚动,按钮永远不出现;滚动监听没加节流,页面掉帧卡顿;scroll-behavior smooth 和手写回滚动画冲突,回顶过程抖动;按钮 z-index 太低,被 fixed 页脚盖住点不到。症状是: