CSS 动画顶部回到开始

有时我们希望网页能够通过滚动来实现一些动画效果，比如导航栏滚动到一定距离后悬浮在页面顶部，或是点击按钮后页面自动滚动到某个位置。其中，回到页面顶部是比较常见的需求。本文将介绍如何使用 CSS 动画实现一个回到页面顶部的效果。

实现思路

对于回到页面顶部这个需求，我们可以另外添加一个按钮，在用户点击该按钮时通过 JavaScript 代码实现滚动到页面顶部的效果。但如果我们希望动画效果更加流畅，并且不需要用户自己点击按钮，而是滚动到页面一定距离后自动触发，该怎么实现呢？

我们可以通过 CSS 动画实现该效果。具体来说，实现思路如下：

1. 给“回到顶部”的按钮添加一个绝对定位，并设置它的 bottom 属性为负值，这样该按钮就隐藏在了页面底部。
2. 使用伪类选择器 :target，当用户点击了链接并跳转至带有特定 id 的锚点时，该伪元素会被激活。我们可以利用该伪类选择器，在用户跳转到 #top 这个锚点时，将按钮滑动到页面上方。
3. 实现滑动动画效果。可以使用 transition 或 animation 属性实现。

代码实现

下面是具体的代码实现过程。

首先，我们先在页面底部添加一个“回到顶部”的按钮：

<a href="#top" class="back-to-top">回到顶部</a>

接着，在 CSS 中设置该按钮的样式：

.back-to-top {
  position: fixed;
  bottom: -50px;
  right: 20px;
  font-size: 14px;
  color: #fff;
  background-color: #333;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: bottom .3s ease-out;
}

.back-to-top:hover {
  background-color: #111;
}

这里我们设置了按钮的初始位置为页面底部，bottom: -50px 表示距离底部 50px 的位置。同时，我们设置了按钮的样式，包括文字颜色、背景颜色、边框圆角等。

接着，我们通过伪类选择器 :target 实现按钮的滑动效果：

#top:target .back-to-top {
  bottom: 20px;
}

当用户点击了带有 id="top" 的锚点时，:target 选择器被激活。这时我们将 .back-to-top 元素的 bottom 属性设置为 20px，就可以将按钮滑动到页面顶部了。

最后，我们再通过 transition 属性设置按钮滑动的动画效果：

#top .back-to-top {
  transition: bottom .3s ease-out;
}

这里我们将 transition 属性加在 #top .back-to-top 选择器上，表示在该元素被滑动到页面顶部时，其 bottom 属性的变化将会被动画显示，总时长为 0.3s，动画效果为 ease-out。

讨论

本文介绍了如何使用 CSS 动画实现回到页面顶部的效果。除了前文提到的 transition 和 animation 属性，还有其他的一些方法可以实现该效果。例如，可以使用 JavaScript 代码监听页面滚动事件，当滚动到一定距离时显示“回到顶部”按钮。不同的方法有各自的优劣点，开发者可以根据实际需要选择合适的方式来实现该效果。