悬浮按钮
Floating Action Button
UI 组件也叫：FAB、浮动按钮、回到顶部按钮、FloatButton
一句话：固定悬浮在屏幕右下角的圆形按钮，页面滚动时不动，放当前页面最常用的一个操作。
详细解释
悬浮按钮（FAB）是一个圆形图标按钮，用固定定位钉在屏幕右下角，带明显的阴影，看起来浮在页面内容之上。页面怎么滚动它都在原地，适合放当前页最主要的操作，比如「发帖」「新建」「联系客服」。「回到顶部」按钮和右下角的在线客服入口也是它的变体。它还可以点击后展开一组小按钮，这叫速拨菜单（Speed Dial）。
悬浮按钮最常见的问题是 遮挡内容：它会盖住列表最后一行、表格右下角的分页、手机上的底部导航栏，所以页面底部要留出足够的空白。一个页面最多放一个主悬浮按钮；需要好几个操作时，改用页面顶部的 工具栏 或普通按钮。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
在页面右下角加一个悬浮按钮：直径 56px 的圆形，深色背景、白色加号图标，带阴影，距右边和底部各 24px，固定定位不随页面滚动，悬停显示「新建任务」提示，点击打开新建对话框；页面底部留 80px 空白，避免遮住最后一条内容。
结构与适用场景
结构描述
一个固定定位的圆形图标按钮，带阴影，可附带文字标签或点击后展开的一组小按钮。
适用场景
- 移动端或内容流页面，有一个最主要、需要随时可点的操作
- 长页面需要一个随时可用的「回到顶部」入口
- 客服、反馈这类需要全站常驻但不占正文空间的入口
不适用场景
- 页面有多个同等重要的操作，用顶部工具栏或按钮组
- 后台表格页右下角有分页或批量操作栏，悬浮按钮会遮挡它们
- 删除这类有破坏性的操作，不适合做成随手可点的常驻按钮
常见坏用法
- 右下角同时堆了回到顶部、客服、反馈、新建四五个悬浮按钮
- 悬浮按钮盖住了列表最后一行或分页，页面底部没有留出空间
- 按钮只有图标没有文字提示，用户猜不出它是做什么的
识别特征
- 屏幕右下角一个带阴影的圆形按钮
- 按钮中间通常是加号、对话气泡或向上箭头图标
- 滚动页面时它始终停在原地
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
.ant-float-btn.ant-back-top[class*="MuiFab-root"].el-backtop.n-float-button.n-back-top.fixed.rounded-full:is(button, a)