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

添加平滑滚动#

我们的目标的第一部分很简单，通过下面的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 
 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 {
  // 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
}