返回顶部按钮必须用 position: fixed，因其脱离文档流、相对视口定位且滚动时位置恒定；absolute 受父容器限制易错位消失，sticky 则依赖滚动容器边界且在 ios safari 和自定义滚动区易失效。

直接用 position: fixed + window.scrollY 就能跑通，不需要框架、不依赖 polyfill，但必须绕开 iOS Safari 的 safe-area 和层叠上下文这两个坑。

为什么不能用 position: absolute 做返回顶部按钮

它会跟着父容器走：只要父级有 transform、overflow: hidden 或 position: relative，按钮就可能被裁剪、错位甚至消失。滚动时直接不见是常态，不是 bug —— 是定位机制决定的。固定在视口右下角，唯一可靠解法就是 position: fixed。

• 必须同时设置 bottom 和 right（比如 bottom: 24px; right: 24px;），只写一个会导致位置不可控
• z-index 别乱堆到 9999，先用浏览器开发者工具查页面最高 z-index（如模态框常用 1050），设成 1060 足够
• 按钮元素必须挂载在 直接子级，别塞进某个 <div class="container"> 里，否则父级触发的层叠上下文会让 <code>z-index 失效

  怎么让按钮只在滚过 300px 后才出现

  监听 scroll 事件时，别用 document.body.scrollTop —— 在 Chrome/Firefox 下行为不一致，部分场景返回 0。统一用 window.scrollY，它是现代标准，所有主流浏览器都支持。

  

  使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

  如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

  下载
  • 阈值设 300 是经验值：太小（如 50）容易误显，太大（如 800）失去提示意义
  • 初始状态建议用 opacity: 0; pointer-events: none; 而不是 display: none，避免触发重排（reflow）
  • 必须节流：高频 scroll 触发会卡顿，用 requestAnimationFrame 包一层最轻量，比 setTimeout 更精准

  点击后平滑回到顶部的兼容写法

  window.scrollTo({ top: 0, behavior: 'smooth' }) 是标准解法，但 Safari behavior: 'smooth'。降级不是加 polyfill，而是 fallback 到原生可用的方案。

  • 别写 window.scrollTo(0, 0) —— 它在部分旧版 Safari 里会跳转失败；改用 document.documentElement.scrollTop = 0
  • 点击后立刻设 btn.disabled = true，防止连点触发多次滚动；滚动结束再恢复，可用 scroll 事件配合简单防抖判断
  • 移动端要加 touch-action: manipulation，否则 iOS Safari 会有约 300ms 点击延迟

  移动端和无障碍最容易漏掉的三件事

  按钮不是图标装饰，屏幕阅读器、键盘 Tab、触屏点击都要能走通。漏掉任意一项，对部分用户就是不可用。

  • 必须用 <button></button> 元素，不能用 <div onclick="..."> —— 后者无法被键盘聚焦，也不响应空格/回车 <li>必须带 <code>aria-label="返回顶部"，不能只靠 ↑ 图标或 tooltip 文字
  • iOS 安全区要处理：bottom: calc(1rem + env(safe-area-inset-bottom))，老设备自动忽略 env()，所以 calc 里必须含 fallback 值（如 1rem）

  真正难的不是写出来，而是验证：真机测 iOS 键盘弹起时按钮是否被顶出、Tab 键能否聚焦、缩放 200% 后 hit area 是否仍够大 —— 这些地方没测试，等于没做完。