跳到主要内容
Termlib

UI 组件 · 基础

悬浮按钮

Floating Action Button

也叫：FAB、浮动按钮、回到顶部按钮、FloatButton

固定悬浮在屏幕右下角的圆形按钮，页面滚动时不动，放当前页面最常用的一个操作。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在页面右下角加一个悬浮按钮：直径 56px 的圆形，深色背景、白色加号图标，带阴影，距右边和底部各 24px，固定定位不随页面滚动，悬停显示「新建任务」提示，点击打开新建对话框；页面底部留 80px 空白，避免遮住最后一条内容。

发给

01判断

你的内容是这样吗？

对照两列，确认悬浮按钮是不是你要找的。

符合这些情况，用悬浮按钮

  • 移动端或内容流页面，有一个最主要、需要随时可点的操作
  • 长页面需要一个随时可用的「回到顶部」入口
  • 客服、反馈这类需要全站常驻但不占正文空间的入口

是这些情况，换成别的

  • 页面有多个同等重要的操作，用顶部工具栏或按钮组

    改用工具栏按钮组

  • 后台表格页右下角有分页或批量操作栏，悬浮按钮会遮挡它们

  • 删除这类有破坏性的操作，不适合做成随手可点的常驻按钮

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    右下角同时堆了回到顶部、客服、反馈、新建四五个悬浮按钮

  2. 02

    悬浮按钮盖住了列表最后一行或分页，页面底部没有留出空间

  3. 03

    按钮只有图标没有文字提示，用户猜不出它是做什么的

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

一个固定定位的圆形图标按钮，带阴影，可附带文字标签或点击后展开的一组小按钮。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1屏幕右下角一个带阴影的圆形按钮
  2. 2按钮中间通常是加号、对话气泡或向上箭头图标
  3. 3滚动页面时它始终停在原地

04解释

详细解释

悬浮按钮（FAB）是一个圆形图标按钮，用固定定位钉在屏幕右下角，带明显的阴影，看起来浮在页面内容之上。页面怎么滚动它都在原地，适合放当前页最主要的操作，比如「发帖」「新建」「联系客服」。「回到顶部」按钮和右下角的在线客服入口也是它的变体。它还可以点击后展开一组小按钮，这叫速拨菜单（Speed Dial）。

悬浮按钮最常见的问题是 遮挡内容：它会盖住列表最后一行、表格右下角的分页、手机上的底部导航栏，所以页面底部要留出足够的空白。一个页面最多放一个主悬浮按钮；需要好几个操作时，改用页面顶部的 工具栏 或普通按钮。

开发者信息
术语 ID
component-fab
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)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • fab
  • float-btn
  • floating-btn
  • floating-button
  • floating-action
  • back-to-top
  • backtop
  • scroll-top
  • scroll-to-top
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Fab
  • FloatButton
  • FloatingActionButton
  • BackTop
  • BackToTop
  • ScrollToTop
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30