:target 伪类不适合做返回顶部功能，它仅响应url锚点变化而不触发滚动、无法控制显隐逻辑、会导致跳转异常和无障碍失效。
直接说结论：:target 伪类**不适合做返回顶部功能**，它无法触发滚动行为，也不能控制显示/隐藏逻辑，强行用会导致跳转异常、历史记录污染、无障碍失效。
为什么 :target 不能用于返回顶部
:target 只在 URL 带锚点（如 #top）且对应元素存在时生效，它本身不触发滚动，也不监听滚动状态——它只是“样式响应器”，不是“行为控制器”。
- 点击
@#@#@#@#@#@#@#@#@#@0会把#top写入地址栏，触发浏览器原生跳转，但这个跳转不可控：可能闪屏、破坏 history.state、干扰 PWA 路由 - 如果页面没定义
id="top"元素，:target完全不生效，按钮也无法自动显示/隐藏 - 无法实现“滚动超过 300px 才显示按钮”这类核心交互逻辑，因为
:target和 scrollY 无关 - 屏幕阅读器会把
<a href="#top"></a>当作真实链接播报，但目标不是新资源，语义错误
真正该用的 CSS + JS 组合方案
按钮定位和视觉靠 CSS，行为和时机靠 JS，这才是现代实践的分层逻辑。
-
position: fixed必须写全四个方向：right: 20px; bottom: 20px; z-index: 100;，漏掉right在 Safari 旧版会默认 left=0 - 按钮默认
display: none或opacity: 0; pointer-events: none;，用 class 切换比内联 style 更利于维护 - 监听
scroll事件时，优先用window.scrollY（IE9+ 支持），比document.documentElement.scrollTop || document.body.scrollTop更简洁可靠 - 滚动到顶必须用
window.scrollTo({ top: 0, behavior: 'smooth' })，不要改scrollTop—— 后者在某些安卓 WebView 中失效
容易被忽略的三个细节
很多线上项目翻车就在这三点：
- 没加
scroll-behavior: smooth到html标签，导致scrollTo的behavior: 'smooth'在部分 Chrome 版本下静默退化为瞬间跳转 - 按钮未设
tabindex="0"且没处理键盘回车/空格触发，违反 WCAG 2.1 键盘可访问性要求 - 在 iOS Safari 中，
fixed按钮在地址栏收起/展开时可能错位，需配合@media (hover: none) and (pointer: coarse)做触控适配，比如微调bottom值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
