最简方案是用 :target 配合 id 锚点实现返回顶部按钮显隐，它不依赖 JS、兼容 IE9+，但仅响应 URL 锚点跳转而非滚动监听；正确写法是将空锚点 置于 body 开头，按钮用 a#top:target ~ .back-to-top 控制显示。
滚动到锚点时显示返回顶部按钮：用 :target 最简方案
直接用 :target 配合一个带 id 的占位锚点，就能让按钮在页面滚动到某处时自动出现。它不依赖 JS，兼容性好（IE9+），但只响应 URL 中的锚点跳转（比如点击 #top 或浏览器后退/前进触发），不是监听滚动位置。
常见错误是把 :target 用在按钮自身上——它必须作用于被跳转的目标元素。正确做法是：给页面顶部设一个空锚点，按钮通过相邻兄弟选择器或通用兄弟选择器关联它。
- 在
开头加： - 按钮写在它后面，用
a#top:target ~ .back-to-top控制显隐 - 注意：
~是通用兄弟选择器，要求按钮和#top同级且在它之后；若按钮在#top内部或前面，此法失效 - 性能无负担，纯 CSS，但无法响应用户滚动条拖动——这点常被忽略
用 :checked 模拟滚动状态：需配合隐藏 checkbox
:checked 本身不感知滚动，只能靠用户主动触发（如点击、focus）来切换状态。想“模拟”滚动到某区域就显示按钮，得手动控制 checkbox 的勾选，通常靠 JS 监听 scroll 事件并操作 input[type="checkbox"] 的 checked 属性。
这种方案本质是用 checkbox 当状态开关，CSS 只负责样式响应，真正的逻辑在 JS 里。好处是状态可控、可复用；坏处是多了一层间接性，容易因 JS 执行时机或 DOM 加载顺序出问题。
- HTML 中放一个隐藏 checkbox：
- CSS 写：
input.scroll-state:checked ~ .back-to-top { opacity: 1; visibility: visible; } - JS 里监听 scroll，当
window.scrollY > 200时设el.checked = true；否则设false - 别忘了给 checkbox 加
position: absolute; left: -9999px;，避免影响布局
为什么不用 position: fixed 直接定位？
固定定位本身没问题，但“显示/隐藏”逻辑不能只靠 display: none 切换——它会破坏文档流，导致页面内容突然上跳（尤其在移动端软键盘弹出后）。更稳妥的是用 opacity + visibility 组合，或者 transform: translateY() 移出视口。
- 推荐写法：
.back-to-top { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }和&.show { opacity: 1; visibility: visible; } - 绝对禁止只用
display: none/block，会导致 Safari 下按钮闪动或滚动位置错乱 - 移动端要注意
fixed在 iOS Safari 中可能随软键盘弹出而错位，加viewportmeta 的height=device-height无实质改善，得靠 JS 补偿
兼容性与真实场景中的取舍
真正在意兼容性（如需支持 IE11）就别碰 IntersectionObserver；想精确响应滚动位置又不想写太多 JS，:checked 方案最平衡；如果项目已用 React/Vue，直接在组件里用 useEffect 或 watch 监听 scrollY 更自然——CSS 伪类只是替代方案，不是银弹。
最容易被忽略的一点：所有基于 CSS 伪类的方案，都绕不开“状态同步”。URL 锚点变化、checkbox 状态、滚动位置三者之间没有自动绑定，一旦用户手改地址栏、刷新页面、或从外部链接带锚点进来，JS 和 CSS 状态很可能不一致。上线前务必测这些边界场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
