fixed定位需同时设置right和bottom，否则按钮可能贴左或渲染异常；锚点跳转需用margin-top负值+padding-top补偿避免遮挡；“首屏后显示”必须用js监听scroll事件控制显隐；平滑滚动应优先用scroll-behavior: smooth，ios 13以下需fallback至window.scrollto。
fixed定位必须写全right和bottom
只写bottom: 24px不写right，按钮会默认贴左——旧版 Safari 甚至可能渲染在视口外。固定定位脱离文档流，浏览器不会“猜”你想放哪，right和bottom缺一不可。
安全起始值推荐：right: 24px、bottom: 24px，留出触控安全间距；z-index: 999要显式设置，否则容易被 sticky 导航、弹窗或广告位盖住。
锚点跳转要防页面抖动
直接用#top跳转会触发浏览器原生滚动，顶部常有突兀的“一卡”，尤其在 Chrome 或移动端。根本原因是锚点目标元素没预留空间，滚动终点被内容挤压。
解决方法是在id="top"的元素上加补偿：
#top {
margin-top: -80px;
padding-top: 80px;
}
这个偏移量要略大于导航栏高度（比如导航高 60px，就设 80px），确保滚动后标题不被遮挡。
纯CSS无法控制“滚动后才显示”
position: fixed一加载就渲染，CSS 没有scrollY > clientHeight这类条件判断能力。所谓“首屏后出现”，本质是 JS 控制显隐类切换。
最小可行 JS 逻辑：
- 初始给按钮加
class="back-to-top--hidden" - CSS 中定义
.back-to-top--hidden { opacity: 0; pointer-events: none; } - 监听
scroll事件，用window.scrollY > document.documentElement.clientHeight判断是否过首屏 - 首次加载也要手动检查一次，防止用户从带 hash 的 URL 刷新后按钮状态错乱
平滑滚动必须靠 scrollTo 或 scroll-behavior
直接改document.body.scrollTop = 0或html.scrollTop = 0会硬跳，没有过渡。现代方案有两个：
方案一（推荐）：全局启用 CSS 平滑行为，在上加style="scroll-behavior: smooth;"，所有锚点跳转自动生效；
方案二（兼容老浏览器）：JS 调用window.scrollTo({ top: 0, behavior: 'smooth' })，比 jQuery 的animate({ scrollTop: 0 })更轻量、更标准。
注意：iOS Safari 对scroll-behavior支持较晚，若需兼容 iOS 13 以下，必须 fallback 到 JS 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
