应使用 position: sticky 配合有 max-height 和 overflow-y: auto 的容器实现侧边回到顶部按钮始终贴边，点击时用 window.scrollTo({top: 0, behavior: 'smooth'}) 实现平滑滚动，移动端降级为 position: fixed，锚点优先用 scrollTo 而非 id="top"。
怎么让侧边回到顶部按钮始终贴着浏览器窗口边缘
关键不是用 position: fixed，而是 position: sticky 配合一个有高度限制的容器。很多人直接给按钮加 position: sticky 却没生效，是因为它只在父容器内“粘”，父容器必须有明确的滚动上下文（比如设置了 max-height 和 overflow-y: auto），否则它就当普通定位处理。
常见错误现象：position: sticky 完全没反应、按钮随页面一起滚动、或卡在顶部不动
- 把按钮放在一个高度受限的侧边栏容器里，比如
<aside class="sidebar"></aside>，并给它设置max-height: 100vh和overflow-y: auto - 按钮自身设
position: sticky+top: 24px（留出一点安全距离） - 确保该容器是文档流中可滚动的部分，不是被
position: fixed或transform隔离的层
点击后如何平滑跳转到页面顶部而不破坏锚点行为
直接写 href="#top" 最省事，但默认是瞬间跳转；想平滑，不能只靠 CSS 的 scroll-behavior: smooth —— 它只对原生锚点有效，且在某些 Safari 版本里对 position: sticky 区域内的点击不触发。
使用场景：用户点击按钮时，既要视觉平滑，又要兼容老浏览器、不干扰 history 栈、不引发重复滚动
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
onclick="window.scrollTo({top: 0, behavior: 'smooth'}); return false;"，最直接可靠 - 避免用
location.hash = 'top'，它会触发 URL 变化和可能的页面重绘 - 如果页面已有
scroll-behavior: smooth全局声明，仍建议显式调用scrollTo，因为部分 Chrome 版本对 sticky 区域内元素的 hash 跳转响应迟钝
为什么侧边导航按钮在移动端容易错位或消失
根本原因是 position: sticky 在 iOS Safari（尤其 15.4 之前）和部分安卓 WebView 中支持不稳定，常表现为“粘不住”或“初始位置偏移”。这不是代码写错了，是渲染引擎的已知限制。
性能 / 兼容性影响：开启 will-change: transform 或给父容器加 transform: translateZ(0) 可能修复部分机型，但会额外触发合成层，增加内存占用
- 移动端优先降级为
position: fixed，用媒体查询区分：@media (max-width: 768px) { .back-to-top { position: fixed; right: 16px; bottom: 24px; } } - 不要依赖
sticky在 iOS 上做精确像素对齐，它对padding和border的计算有时不一致 - 测试时务必真机连 Safari 开发者工具，模拟器经常不暴露真实渲染问题
锚点 ID 写成 id="top" 还是用 document.documentElement
写 id="top" 看似简单，但实际埋了坑：如果页面顶部有 margin/padding、或用了 box-sizing: border-box 混搭，滚动终点可能不准；更麻烦的是，若后续加了 header 固定定位，#top 会被遮挡。
参数差异：用 scrollTo 直接滚到 0 是绝对坐标，不受 DOM 结构变化影响；而锚点依赖元素实际位置，易受样式扰动
- 永远优先用
window.scrollTo({top: 0})，而不是找某个<div id="top"> <li>如果必须用锚点（比如 SEO 或 SSR 场景），把 <code>id="top"放在下第一个元素上，并确保它有margin-top: 0和明确position: relative - 别给
#top加padding-top来规避固定 header —— 这会让scrollIntoView计算失准，且无法和scroll-behavior: smooth协同
最常被忽略的一点：sticky 元素的“粘性边界”由最近的具有滚动机制的祖先决定，而不是视口。很多人在 flex 布局或 grid 容器里套 sticky 按钮，却忘了那个容器本身没滚动能力——这时候它就退化成 relative，不是 bug，是规范行为。
