ICEN UI 设计系统
搜索组件… ⌘K

回到顶部

与 behaviors/back-top 配套：滚动超过阈值（默认 320px）出现的悬浮按钮，点击平滑滚回顶部。支持手写按钮或 autoCreate 全自动。

点击按钮平滑滚到页面底部，右下角会浮出回到顶部按钮（autoCreate 模式）。

<div class="demo-row">  <button class="btn" id="back-top-demo">向下滚动本页测试 →</button></div><p class="dim" style="margin:8px 0 0;font-size:12px">点击按钮平滑滚到页面底部，右下角会浮出回到顶部按钮（autoCreate 模式）。</p>

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

import '@icen.ai/ui/kit/back-top';

也可以用脚手架直接打印引入行：

bunx --bun @icen.ai/ui add back-top

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/back-top.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

import { initBackTop } from '@icen.ai/ui/behaviors/back-top'; // 全自动：portal 一个默认按钮到 body，滚到顶initBackTop({ autoCreate: true }); // 或手写：// <button class="back-top" data-back-top type="button" aria-label="回到顶部">…svg…</button>// initBackTop();// 可选 data-* 或 opts：threshold（默认 320）/ target（滚动容器）/ offset（滚到多少 px）