锚点跳转使url变为#top是因修改location.hash，干扰spa路由；需用div而非header设id，避免遮挡；ssr下导致hydrate不匹配；safari旧版不支持smooth滚动，应检测scrollbehavior属性后降级。
锚点跳转为什么会让 URL 变成 #top 且可能干扰路由
锚点本质是浏览器地址栏的 fragment identifier，点击 <a href="#top"></a> 会强制修改 window.location.hash，导致 URL 后缀变成 #top。这对单页应用（SPA）尤其危险：vue-router 或 react-router 可能误判为 hash 路由变更，触发不必要的重渲染或丢失状态。
常见现象包括：页面闪一下、当前 tab 切换失效、埋点统计多报一次「页面进入」事件。
- 必须用
<div id="top"></div>，不能靠<header id="top"></header>—— 某些浏览器滚动后会把固定定位的<header></header>遮住内容顶部 - 如果页面已有
history.pushState管理 URL，锚点跳转会绕过它，造成 history stack 不一致 - 服务端渲染（SSR）页面中，首次加载带
#top的 URL，可能让 hydrate 阶段 DOM 与服务端 HTML 不匹配
window.scrollTo({top: 0, behavior: "smooth"}) 在 Safari 15.4 以下失效怎么办
iOS 15.3 及更早版本、macOS Monterey 之前的 Safari 完全不支持 behavior: "smooth" 参数，调用后等同于 window.scrollTo(0, 0) —— 瞬间跳变，无动画。
不能只靠 try/catch 检测，因为语法合法、只是被忽略。正确做法是检测 CSS 属性支持性：
if ('scrollBehavior' in document.documentElement.style) {
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
// 降级：requestAnimationFrame 逐帧滚动
const start = window.scrollY;
const startTime = performance.now();
const duration = 300; // 毫秒
function step(timestamp) {
const progress = Math.min((timestamp - startTime) / duration, 1);
const easeOut = 1 - Math.pow(1 - progress, 3); // cubic-out
window.scrollTo(0, start * (1 - easeOut));
if (progress
- 别用
scrollTop = 0直接赋值 —— 在 Chrome 新版中已废弃对document.body.scrollTop的写入支持，仅document.documentElement.scrollTop有效，但两者在不同浏览器中行为不一致 - 避免混用
scrollIntoView()和scrollTo()：前者依赖目标元素存在且可见，后者不依赖 DOM，更稳
按钮点击没反应？大概率是 z-index 被父容器截断了
即使写了 position: fixed; z-index: 9999;，按钮仍可能点不动。根本原因不是 z-index 数值不够大，而是父级元素触发了新的层叠上下文（stacking context），把按钮「框死」在局部层级里。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
典型触发条件：transform、filter、opacity 、<code>will-change、isolation: isolate —— 这些 CSS 属性会让该元素成为层叠上下文根节点，其子元素的 z-index 只在内部生效。
- 检查按钮父容器是否用了
transform: translateZ(0)或filter: blur(1px)—— 这类「优化技巧」反而会锁死按钮层级 - 按钮必须直接挂载在
下，或确保其最近的非层叠上下文祖先足够高（比如<main></main>或<div id="app">）<li>移动端虚拟键盘弹出时，<code>fixed元素可能被顶起或缩放，建议用bottom: env(safe-area-inset-bottom, 20px)替代固定像素值 - 监听 scroll 事件时务必加
{ passive: true }，否则 iOS Safari 会警告「[Violation] Added non-passive event listener」并卡顿 - 不要在 scroll 回调里反复调用
getBoundingClientRect()或触发重排 —— 用window.pageYOffset是最轻量的读取方式 - 阈值建议设为
300而非screen.height—— 用户可能用分屏或多显示器，视口高度不稳定
滚动监听用 window.pageYOffset 还是 document.documentElement.scrollTop
答案是：统一用 window.pageYOffset。它是只读属性，跨浏览器返回当前垂直滚动距离，无需兼容处理，且不会因文档模式（Quirks Mode）差异而错乱。
老式写法 document.body.scrollTop || document.documentElement.scrollTop 在现代浏览器中已不可靠：Chrome 89+ 开始，document.body.scrollTop 始终返回 0（无论是否在 Quirks Mode），导致阈值判断失效。
实际项目里最容易被忽略的，不是怎么滚上去，而是滚上去之后——顶部内容是否被固定导航栏遮挡、按钮是否在键盘弹出时移位、屏幕阅读器能否聚焦到按钮并朗读「返回顶部」。这些细节不处理，平滑滚动再好看也是半残功能。
