返回顶部按钮必须用 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 足够
• 按钮元素必须挂载在 直接子级，别塞进某个
  里，否则父级触发的层叠上下文会让 z-index 失效

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

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

  • 阈值设 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 到原生可用的方案。

  

  htmlppt.skill

  把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

  下载

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

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

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

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

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