点击按钮返回顶部，可通过设置锚点实现。使用 标签并绑定 href="#top"，在页面顶部设置

作为锚点。JavaScript 也可用于平滑滚动效果。代码示例：返回顶部

CSS（可选平滑

div#top {
  margin-top: -60px;
  padding-top: 60px;
  height: 0;
}

其中 60px 对应你固定头部的高度。这个技巧依赖 CSS 流式布局特性，不会破坏文档流，也不影响其他 JS 滚动逻辑。

用 JavaScript 实现平滑滚动并兼容旧浏览器

如果想控制滚动行为（比如加动画、指定偏移量、或监听滚动完成），就得用 JS。现代浏览器支持 scrollIntoView 或 window.scrollTo，但要注意参数差异：

• element.scrollIntoView({ behavior: 'smooth', block: 'start' }) —— 滚动到元素可见区域顶部，block 控制垂直对齐方式
• window.scrollTo({ top: 0, behavior: 'smooth' }) —— 直接滚到页面顶部，更可控，也更容易加偏移（比如减去导航栏高度）
• IE 不支持 behavior: 'smooth'，可降级为 window.scrollTo(0, 0)，或用第三方库如 smooth-scroll

示例（带导航栏偏移）：

document.querySelector('#back-to-top').addEventListener('click', () => {
  const headerHeight = document.querySelector('header').offsetHeight;
  window.scrollTo({
    top: headerHeight * -1,
    behavior: 'smooth'
  });
});

为什么不用 scrollTop = 0 直接赋值

直接写 document.documentElement.scrollTop = 0 或 document.body.scrollTop = 0 确实能立刻跳顶，但它不触发平滑动画，也没有过渡控制；更重要的是，在部分 iOS Safari 和旧 Android WebView 中，body.scrollTop 可能无效，必须写到 document.documentElement；而混用两者又容易出兼容问题。所以优先用 window.scrollTo，它统一了 API，且现代标准下行为一致。

锚点跳转看似简单，真正麻烦的是视觉对齐和跨设备一致性——固定头部、缩放页面、iOS 的 viewport 缩放都会让“顶部”变得不那么确定。动手前先确认你的 #top 元素是否真的在 DOM 最上方，以及有没有被 transform 或 overflow: hidden 影响定位上下文。