1. 熟悉两个滚动的基础属性

1.1 position:sticky

position:sticky 的元素首先根据文档流进行定位，然后根据 top、right、bottom 和 left 的值相对其最近的滚动祖先元素 (Nearest Scrolling Ancestor) 和包含块元素（最近的块级祖先元素，包括表格）进行偏移，且偏移量不影响其他元素位置。

dt {
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

position:sticky 始终会创建一个新的堆叠上下文，而且 sticky 元素会 “sticky” 在其最近的具有 “滚动机制”（overflow 为 hidden、scroll、 auto、overlay）的祖先元素上，即使该祖先元素并非最近的实际滚动祖先元素。

1.2 scroll-behavior: smooth

scroll-behavior: smooth 是一个非常新的 CSS 属性，支持率相对较低。其确切定义要求滚动行为（尤其是在锚点链接时）具有流畅的动画效果，而不是默认的、更不协调的即时跳转。

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;

该属性采用 “渐进式增强” 策略，即对于支持该属性的浏览器来说，其将提供更好的体验，但对于不支持该属性的浏览器也能保持底线。

目前，Chrome>=61、Edge>=79、Safari>=15.4、FireFox>=36、Opera>=48 等都支持该属性，但是 IE 全系列都不支持，caniuse 给出的浏览器整体支持率为 94.06%。

2. 构建返回顶部示例

2.1 创建基础的 HTML

下面是示例的 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 > 标签内，其并非文章的明确组成部分，且希望其在焦点顺序中位于最后。

同时，还在 <header> 元素中添加了 id="top" ，并将该锚点用作返回顶部链接的 href 值。

2.2 添加 smooth-scrolling

此时为页面添加以下 CSS 样式：

// 如果用户对运动敏感度没有偏好，则可以平滑滚动
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

prefers-reduced-motion 媒体功能用于检测用户是否在其设备上启用了相关设置以最大程度地减少不必要的动效，即希望移除、减少或替换界面中的动画。

此类动画可能会引发前庭运动障碍患者的不适，缩放或平移大型物体等动画可能会引发前庭运动障碍。

2.3 设置 “返回顶部” 链接的样式

接下来为链接添加基本的样式：

.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;
  padding: 0.25rem;
}

以上代码设置了一个非常基本的圆形按钮，同时从 HTML 结构可以看出，在链接的外面还添加了一个 back-to-top-wrapper 元素。

这是因为 position:sticky 会从元素在 DOM 中的位置拾取元素，然后根据 top 值将其相对视口定位。但是，由于将链接放在了文档末尾，因此如果没有一些辅助可能永远不会被拾取。

因此，示例使用 back-to-top-wrapper 包装器和 position:absolute 来将链接的位置调整到页面视觉上更高的位置。此时浏览器会使用新位置，即包装器进入视口时的位置来计算何时 “stick” 链接。

/* 在链接出现之前，<main> 页面内的滚动距离 */
$scrollLength: 100vh;
.back-to-top-wrapper {
  // 可以取消以下注释来可视化轨道
  // outline: 1px solid red;
  position: absolute;
  top: $scrollLength;
  right: 0.25rem;
  // 将最终链接延伸至, 页面底部的页脚
  // 设置为 `0` 表示在 `main` 的末尾停止
  bottom: -5em;
  width: 3em;
  pointer-events: none;
  // 防止包装器阻止文章内容被点击
}

此时链接与内容略微重叠，位于初始视口内容下方。接着可以给 <main> 添加样式来避免该问题，同时添加 position:relative：

main {
  // 为 “滚动轨道” 留出空间
  padding: 0 3rem;
  // 确保锚点包装器的 `absolute` 定位父元素为 <main>
  position: relative;
  max-width: 50rem;
  margin: 2rem auto;
}

最后，继续给链接添加定位所需的样式，使其完全正常工作：

.back-to-top-link {
  // 当不支持 `sticky` 时，`fixed` 打底
  position: fixed;
  // preferred positioning, requires prefixing for most support, and not supported on Safari
  // @link https://caniuse.com/#search=position%3A%20sticky
  position: sticky;
  // 恢复点击
  pointer-events: all;
  // 在视口内实现所需定位
  // 当 `sticky` 接管时，相对于视口顶部；或当使用 `fixed` 打底时，始终相对于视口顶部
  top: calc(100vh - 5rem);
}

回退到 fixed 则意味着不支持 sticky 定位的浏览器将始终显示链接。而当支持 sticky 定位时，链接在 $scrollLength 之前不会显示。使用 sticky 定位时，一旦包装器顶部位于视口内，链接就会 “卡住” 并随用户滚动。

下面是完整的 CSS 样式：

$color: #254568;
$main-width: 50rem;
$scrollLength: 100vh;
* {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
main {
  padding: 0 3rem;
  position: relative;
  max-width: $main-width;
  margin: 2rem auto;
  *:last-child {
    margin-bottom: 0;
  }
}
.back-to-top-wrapper {
  position: absolute;
  top: $scrollLength;
  right: 0.25rem;
  bottom: -5em;
  width: 3em;
  pointer-events: none;
}
.back-to-top-link {
  position: fixed;
  position: sticky;
  pointer-events: all;
  top: calc(100vh - 5rem);
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  padding: 0.25rem;
  border: 1px solid $color;
  background-color: scale-color($color, $lightness: 85%);
  transition: transform 80ms ease-in;
  &:hover,
  &:focus {
    transform: scale(1.1);
  }
  &:focus {
    outline: none;
    box-shadow: 0 0 0 3px scale-color($color, $lightness: 35%);
  }
}
body {
  font-family: "Baloo 2", sans-serif;
  min-height: 100vh;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  // Remove default browser margin
  margin: 0;
}

header,
footer {
  display: grid;
  place-items: center;
  background-color: $color;
  color: #fff;
}
header {
  background-image: url(https://images.unsplash.com/photo-1513628253939-010e64ac66cd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
h1 {
  font-size: 4rem;
  text-align: center;
}
p {
  font-size: 1.125rem;
  line-height: 1.5;
}

参考资料

声明：文章参考了 Stephanie Eckles 发表的《Pure CSS Smooth-Scroll "Back to Top"》，同时添加了自己的理解。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

还用 JavaScript 实现返回顶部?纯 CSS 轻松搞定!