# 返回顶部 Back to Top > 滚下去一段后右下角出现一个向上的箭头，外圈是阅读进度，点一下平滑回到顶部。 分类：导航 [全部组件和流程](https://www.dachuiai.com/llms.txt) · [导航选型规则](https://www.dachuiai.com/guides/navigation.md) ## 给 AI：用户把这个组件发给了你 1. 先看用户的项目：框架、页面类型、现在的风格、手机还是电脑为主。 2. 对照下面的「适合 / 不适合」判断合不合适。不合适就直接说，并从[导航选型规则](https://www.dachuiai.com/guides/navigation.md)或[全部组件](https://www.dachuiai.com/llms.txt)里另挑一个。 3. 合适就按「装进项目」装好，示例里的文字和图片换成用户自己的。 4. 告诉用户用了什么、放在哪个文件、以后想改快慢、颜色、大小改哪个参数。 ## 什么时候用 - 适合：很长的页面：长文章、长列表、无限滚动。 - 不适合：一两屏的短页面。 - 适合的网站：内容站、电商、官网、SaaS、作品集 - 放在：全站 - 手机上：好用：别挡住底部标签栏和客服按钮。 - 性能代价：低 - 常搭配：[无限滚动 Infinite Scroll](https://www.dachuiai.com/c/infinite-scroll.md)、[锚点导航 Anchor](https://www.dachuiai.com/c/anchor-nav.md)、[吸顶导航 Sticky Header](https://www.dachuiai.com/c/sticky-header.md) ## 装进项目 - 写法：React 18 以上 + TypeScript + Tailwind CSS v4，一个文件就能用，不引用别的组件。 - 依赖：`npm i lucide-react` - 文件：原样存成 `back-to-top.tsx`（比如 `src/components/back-to-top.tsx`）。能跑命令就下载[原文](https://www.dachuiai.com/code/back-to-top.tsx)，比手抄准：`curl -fsSL -o src/components/back-to-top.tsx https://www.dachuiai.com/code/back-to-top.tsx`（Windows 写 `curl.exe`）。下载完看一眼第一行是 `import`，不是网页。 - 导出：`BackToTop` 是可以直接用的部分；最后的 `export default` 是演示示例，只作参考。 - 图片：示例用了本站的 [/tex/s4.jpg](https://www.dachuiai.com/tex/s4.jpg)、[/tex/s1.jpg](https://www.dachuiai.com/tex/s1.jpg)、[/tex/s5.jpg](https://www.dachuiai.com/tex/s5.jpg)、[/tex/s2.jpg](https://www.dachuiai.com/tex/s2.jpg)。换成用户自己的图；只想先看效果，可以从本站同样的路径下载，放进项目的 public 目录。 - 保留代码里 `prefers-reduced-motion` 的处理：用户开了「减弱动态效果」时内容照样完整显示。 - Next.js（有 app 文件夹）：文件第一行加 `'use client';`。 - 用 JavaScript 不用 TypeScript：Vite 和 Next.js 都能直接用 .tsx 文件；也可以删掉类型标注，改名 .jsx。 - 没有 Tailwind：先装 Tailwind CSS v4（Vite 项目 `npm i tailwindcss @tailwindcss/vite`，vite 配置的 plugins 里加 `tailwindcss()`，入口引入的那个 CSS 文件（一般是 `src/index.css`）第一行写 `@import "tailwindcss";`），或者把类名改写成项目用的样式。 - 已经装了 Tailwind v3：别为了一个组件升级。类名大多通用，少数 v4 写法要换，比如焦点框 `outline-2` 在 v3 里要写成 `outline outline-2`。 - 不是 React（Vue、Svelte、小程序、纯 HTML）：照着代码的做法改写，时长、曲线、参数保持一样。Wix、有赞这类建站平台装不进代码，告诉用户去平台自带的动效设置里找。 ## 参数 | 参数 | 默认值 | 作用 | | --- | --- | --- | | `scroller` | | 滚动盒子的 ref；整页滚动时不传 | | `showAfter` | `400` | 滚过多少像素后出现 | ## 你可以说 > 长页面右下角加 Back to Top 返回顶部按钮：滚下去一屏后出现，外圈显示阅读进度，点一下平滑回到顶部。 ## 完整代码 ```tsx import {useEffect, useRef, useState, type RefObject} from 'react'; import {ArrowUp} from 'lucide-react'; /* --------------------------------------------------------------- * BackToTop 返回顶部 * 长页面滚下去以后，右下角出现一个向上的箭头，点一下平滑回到最上面。 * 外圈是阅读进度。页面不长就不用加。 * 整页用时 scroller 不传；放在可滚动的盒子里时，传这个盒子。 * ------------------------------------------------------------- */ export function BackToTop({scroller, showAfter = 400}: {scroller?: RefObject; showAfter?: number}) { const [y, setY] = useState(0); const [max, setMax] = useState(1); useEffect(() => { const el = scroller?.current; const target = el ?? window; const read = () => { const top = el ? el.scrollTop : window.scrollY; const h = el ? el.scrollHeight - el.clientHeight : document.documentElement.scrollHeight - innerHeight; setY(top); setMax(Math.max(1, h)); }; read(); target.addEventListener('scroll', read, {passive: true}); return () => target.removeEventListener('scroll', read); }, [scroller]); const show = y > showAfter; const C = 2 * Math.PI * 22; const toTop = () => { const smooth = !window.matchMedia('(prefers-reduced-motion: reduce)').matches; (scroller?.current ?? window).scrollTo({top: 0, behavior: smooth ? 'smooth' : 'auto'}); }; return ( ); } /* ---------------- 示例：手机上的一篇长攻略 ---------------- */ const PARAS = [ '第一次露营，选有水有电、离停车场近的营地。地面要平，避开低洼处和大树下。', '先铺地布，再展开帐篷，四角地钉斜着打进去。风大的时候，迎风面放低。', '山里夜里比白天冷 10 度。睡垫比睡袋更重要，它挡住的是地面传上来的冷。', '卡式炉加一口锅就够了。提前把食材切好分袋装，到营地只需要加热。', '垃圾全部带走，帐篷晾干再收。离开前回头看一眼，地上什么都不留下。', ]; export default function BackToTopDemo() { const box = useRef(null); return (

露营新手指南

山野编辑部 · 8 分钟阅读

{[...PARAS, ...PARAS].map((p, i) => (
{i % 3 === 2 && }

{p}

))}
); } ```