用途:Back to Top 帮助用户在浏览冗长或无限内容后快速回到页面顶部,减少手动长距离滚动。常见于内容量大的长页面、博客、文档页和电商分类列表。
主要能力与要点:浮动的按钮或链接通常位于右下角,提供返回顶部的快捷入口。实现前应确认该模式确实匹配问题与约束,再参考 references/pattern.md 中的结构与示例,选择最小可行变体。
无障碍要求:按钮需可键盘聚焦,并支持 Enter 或 Space 激活;与背景保持足够色彩对比;为屏幕阅读器提供恰当的 aria-label 或描述性文本;滚动回顶后需管理焦点或保持逻辑焦点。不要将其隐藏在复杂交互或动画后,不要遮挡其他重要 UI,不要在没有替代焦点样式时禁用焦点轮廓。
性能建议:目标为滚动超过约 2 倍视口高度(或约 1000px)后显示;滚动动画时长 300–500ms;淡入过渡小于 200ms;点击响应延迟小于 50ms;滚动动画保持 60fps。滚动事件应节流(每 100–150ms 检查一次位置),优先使用 Intersection Observer 而非滚动监听。
常见错误:短页面常驻显示造成 UI 杂乱;无动画直接跳转令用户迷失;对比度低或按钮过小难点击;遮挡聊天组件、Cookie 横幅等重要交互元素;缺少键盘支持;缺少 hover、focus、active 等视觉反馈。
限制:短页面、已具备持久底部导航或粘性顶部菜单、且不涉及无限滚动的页面应避免使用此模式。完整实现细节、示例与测试说明需参见 references/pattern.md。