最简实现是用 window.scrollto({top: 0, behavior: 'smooth'})，配合 scrolly ≥ 300 时显示按钮、节流处理、fixed 定位适配 ios 安全区、使用 button 元素并添加 aria-label。

点击按钮滚动到页面顶部的最简实现

直接用 window.scrollTo() 是最轻量、兼容性最好的方式，不需要任何库或复杂逻辑。现代浏览器都支持带参数的对象写法，能触发平滑滚动。

• 给按钮加 onclick="window.scrollTo({top: 0, behavior: 'smooth'});"
• 或者用事件监听更利于维护：

  document.getElementById('backToTop').addEventListener('click', () => {
    window.scrollTo({top: 0, behavior: 'smooth'});
  });

• 注意：IE 不支持 behavior: 'smooth'，会自动降级为瞬间跳转，不影响功能

按钮只在滚动一定距离后显示

用户刚打开页面时不需要“回到顶部”，硬塞出来反而干扰。监听 scroll 事件判断 window.scrollY 是常规做法。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 推荐阈值设为 300 像素（约半屏），太小容易误触，太大又延迟响应
• CSS 需提前定义按钮的隐藏状态：.back-to-top { display: none; }，再用 JS 切换 display: block 或加 class 控制显隐
• 别忘了节流：连续滚动时频繁触发 scroll 会影响性能，用 setTimeout 或 requestAnimationFrame 包一层

固定定位 + 右下角悬浮按钮的常见样式问题

按钮常放在右下角，但 position: fixed 容易和页脚、弹窗、iOS Safari 地址栏冲突。

• 基础定位代码：right: 20px; bottom: 20px;，但 iOS 上可能被地址栏遮挡，建议加 padding-bottom: env(safe-area-inset-bottom) 兼容刘海屏
• 如果页面有 transform 或 filter 的祖先元素，fixed 会失效（变成相对该元素定位），检查 DOM 结构中是否有这类样式
• 按钮图标用 SVG 更清晰，避免缩放失真；若用字体图标（如 Font Awesome），确保加载完成后再显示按钮，否则可能闪动

无障碍与可访问性必须处理的细节

这个按钮不是装饰，屏幕阅读器用户、键盘用户都需要它正常工作。

• 按钮必须是 <button></button> 元素，不能用 <div> 或 <code><a href="#"></a>（后者会触发页面跳转并重置历史）
• 加上 aria-label="回到顶部"，中文环境别用英文 label
• 确保能用 Tab 键聚焦，且按 Enter 或 Space 可触发；测试时关掉鼠标，纯键盘操作走一遍
• 滚动过程中，焦点不会自动回到按钮上——这是正常行为，不必强行处理，否则反而打断用户操作流
实际项目里最容易漏的是可访问性和 iOS 定位偏移，尤其当页面结构动态变化或用了 CSS 框架时，fixed 行为可能被意外覆盖。先跑通基础滚动，再逐项补上这些细节。