需要滚动到页面的顶部吗?

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

也许向用户提供此功能的最简单方法是链接到 <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'
});

有关平滑滚动的更完整的故事,我们有一个页面专门介绍它