也许向用户提供此功能的最简单方法是链接到 <html> 元素上的 ID。 就像这样……
<html id="top">
<body>
<!-- the entire document -->
<a href="#top">Jump to top of page</a>
</body>
</html>但我们这里有几个选项。
如果您希望它平滑滚动到顶部，则可以在 CSS 中执行此操作。
html {
scroll-behavior: smooth;
}请注意，在 HTML 元素上放置这样的属性是包罗万象的行为，您对此没有太多控制权。
在这种情况下，我们也没有链接到可聚焦元素，这意味着焦点不会改变。 这可能很重要，所以这样会更好
<html>
<body>
<a id="top"></a>
<!-- the entire document -->
<a href="#top">Jump to top of page</a>
</body>
</html>它更好，因为焦点会移动到该锚点标签，这对使用键盘或辅助技术的人来说很好。
但这些都需要点击。 您可能需要在 JavaScript 中触发滚动，在这种情况下
window.scrollTo(0, 0);……是将窗口（或任何其他元素）滚动回顶部的可靠方法。 其滚动行为也由 CSS 决定，但如果您没有这样做，则可以在 JavaScript 中强制平滑度
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});有关平滑滚动的更完整的故事，我们有一个页面专门介绍它。
我建议将顶部标签制作成一个 span。 没有 href 的锚点标签会被无障碍扫描程序标记。
一直想知道为什么不是 body，这里是否有禁止使用 body 标签的规则？
IMO，“scroll: smooth” 的使用已经失控了。
当您被迫等待几秒钟才能完成滚动动画时，浏览长文章变得很乏味。 这个问题在手机上更加严重，因为小屏幕导致垂直页面变长，并且会对电池寿命产生负面影响，因为 GPU 正在运行。
这太棒了，也让我想起了你创建 css-tricks 的原因。 巧妙的代码片段可以提高开发人员的效率。
我最近注意到，手机有时需要这个功能才能将用户带回顶部，以便在通常位于页脚的主要架构之外进行进一步导航。
无需为任何元素指定 top 的 ID。 默认情况下，所有主要浏览器都会默认加载页面的顶部，只需引用该 ID 或 # 即可。 例如
<a href="#top">或<a href="#">谢谢 Chris！
快速说明：小心 scroll-behavior，它与 iOS Safari 不兼容 :) https://caniuse.cn/#search=scroll-behavior
我发现返回顶部锚点即使未定义“顶部”的 ID/类也能正常工作。 但是平滑滚动需要目标锚点或具有定义的“顶部”ID 的元素才能工作。 为什么会这样我也不知道。“顶部”是否已在 DOM 中定义？
当使用它来定位页面的特定部分时，我想当网站具有固定导航栏时，这实际上不起作用，对吧？ 滚动到特定目标时可能不会考虑导航栏的高度。 我的意思是，目标将在导航栏下方，因此不可见。