纯粹的CSS平滑滚动 "回到顶部"（附实例）

"返回顶部 "链接最近可能不常使用，但有两个现代CSS特性，该技术很好地展示了这一点：

• position: sticky
• scroll-behavior: smooth

我第一次爱上 "返回顶部 "链接--然后学会了如何用jQuery做这些链接--是在2011年最华丽的网站之一。Web Designer Wall。

这个想法是为用户提供一个 "跳转链接 "来滚动到网站的顶部，这在以前的博客中经常使用。

下面是我们要学习实现的内容：

关于position: sticky

这个较新的位置值在caniuse上有如下描述。

将元素定位为 "固定 "或 "相对"，取决于它在视口中的显示方式。结果是，在滚动时，元素在必要时被 "卡住"。

caniuse数据的另一个重要说明是，你将需要提供它的前缀，以获得最佳支持。我们的演示将回落到position: fixed ，这将实现主要目标，只是不那么优雅。

关于scroll-behavior: smooth#

这是一个非常新的属性，而且支持率相对较低。这个确切的定义要求滚动行为，特别是在选择一个锚定链接时，有一个平滑的动画外观，而不是默认的、更刺耳的即时跳转。

使用它可以提供 "渐进式增强"，这意味着对于那些浏览器支持它的人来说，这将是一个更好的体验，但对于那些不支持它的浏览器来说，它也可以发挥作用。

令人惊讶的是，Safari在这方面的支持是落后的，但其他主要浏览器都支持。

设置舞台：基本内容HTML

首先，我们需要为基本内容格式设置一些语义标记:

<header id="top">Title</header>
<main>
  <article>
    <!-- long form content here -->
  </article>
  <!-- Back to Top link -->
  <div class="back-to-top-wrapper">
    <a href="#top" class="back-to-top-link" aria-label="Scroll to Top">🔝</a>
  </div>
</main>

我们把我们的链接放在article 之后，但在main 。它并不是文章的具体组成部分，而且我们还希望它在焦点顺序中处于最后。

我们还将id="top" 添加到<header> ，并将该锚点作为返回顶部链接的href 值。如果你只想滚动到<main> 的顶部，你可以移动这个id，或者也可以把它附加到靠近页面顶部的一个现有id上。

添加平滑滚动#

我们的目标的第一部分很简单，通过下面的CSS规则就可以实现。

/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

我发现了一些奇怪的现象，比如当你访问一个在URL中包含#anchor 的页面时，它仍然会执行平滑滚动，这对于你的情况来说可能并不理想。

为 "返回顶部 "链接设计样式

在我们让它发挥作用之前，让我们对链接进行一些基本的样式设计。为了好玩，我使用了一个表情符号，但你也可以换成一个SVG图标，以便对样式进行更多的控制:

.back-to-top-link {
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #d6e3f0;
  /* emoji don't behave like regular fonts
     so this helped position it correctly */
  padding: 0.25rem;
}

这给了我们一个非常基本的圆形按钮。在完整的Codepen中，我已经添加了额外的 "漂亮 "样式和:hover 、:focus ，但这些都不是必要的。

接下来，你可能想知道为什么我们要为这个链接添加一个包装器。原因是我们需要用它来创建一个 "滚动轨道"，让链接生活在其中。

position: sticky 的设计方式是，它从元素在DOM中的位置拾取它。然后，它尊重一个 "top "值，将其置于相对于视口的位置。然而，我们把链接放在了文档的最后，所以如果没有一些帮助，它基本上不会被选中。

我们将使用包装器和position: absolute ，以改变链接的位置，使其在页面上的视觉效果更高。值得庆幸的是，浏览器会使用这个视觉上的调整位置--也就是它进入视口的时间--来计算何时 "粘 "住链接。

因此，我们的包装样式看起来像这样:

/* How far of a scroll travel within <main> prior to the
   link appearing */
$scrollLength: 100vh;

.back-to-top-wrapper {
  // uncomment to visualize "track"
  // outline: 1px solid red;
  position: absolute;
  top: $scrollLength;
  right: 0.25rem;
  // Optional, extends the final link into the
  // footer at the bottom of the page
  // Set to `0` to stop at the end of `main`
  bottom: -5em;
  // Required for best support in browsers not supporting `sticky`
  width: 3em;
  // Disable interaction with this element
  pointer-events: none;
}

最后一个定义对你来说可能也是新的：pointer-events: none 。这实质上是让点击等交互事件 "穿过 "这个元素，这样它就不会阻塞文档的其他部分。例如，我们不希望这个包装器意外地阻塞内容中的链接。

有了这个，我们现在可以看到链接在初始视口内容的下面有一点重叠。让我们在<main> ，以防止这种重叠，同时添加position: relative ，这对于绝对链接包装器的最佳效果来说是必要的:

main {
  // leave room for the "scroll track"
  padding: 0 3rem;
  // required to make sure the `absolute` positioning of
  // the anchor wrapper is indeed `relative` to this element vs. the body
  position: relative;
  max-width: 50rem;
  margin: 2rem auto;

  // Optional, clears margin if last element is a block item
  *:last-child {
    margin-bottom: 0;
  }
}

剩下的就是重新访问该链接，为定位添加必要的样式，使其完全发挥作用:

.back-to-top-link {
  // `fixed` is fallback when `sticky` not supported
  position: fixed;
  // preferred positioning, requires prefixing for most support, and not supported on Safari
  // @link https://caniuse.com/#search=position%3A%20sticky
  position: sticky;
  // reinstate clicks
  pointer-events: all;
  // achieves desired positioning within the viewport
  // relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used
  top: calc(100vh - 5rem);

  // ... styles written earlier
}

fixed 的回退意味着不支持sticky 定位的浏览器将始终显示该链接。当支持sticky ，就会发生完全理想的效果，即链接不会出现，直到通过$scrollLength 。在sticky ，一旦包装器的顶部进入视口，链接就会被 "卡住"，随用户滚动。

请注意，我们还用all 的值恢复了pointer-events ，这样与链接的交互才会真正发挥作用。

已知问题

如果你有简短的内容，在较短的设备视口上，这不会很优雅地失败。你可能会想--就像我一样--使用overflow: hidden 。但不幸的是，这使得position: sticky 完全无法工作☹️ 所以在一个 "真实世界 "的场景中，你可能不得不提供一个选项来切换每篇文章的行为，或者在将文章注入模板之前执行一个计算来确定它是否符合长度要求。

如果你知道或发现这些方法有任何其他的 "问题"，请留言。