css下滑时始终回到顶部

CSS下滑时始终回到顶部是很常见的需求，特别是在单页应用程序中。这可以通过使用JavaScript实现，但是也可以使用纯CSS解决。下面介绍一种纯CSS的方法。

html {
  scroll-behavior: smooth;
}

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333;
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  opacity: 0;
  transition: opacity 0.2s;
}

#back-to-top:hover {
  opacity: 1;
}

#page-top:target #back-to-top {
  opacity: 1;
}

#page-top:target {
  scroll-margin-top: 0;
} 

首先，在html元素上设置scroll-behavior属性为smooth，以实现平滑的滚动效果。接下来，创建一个id为back-to-top的元素，它将显示在浏览器窗口的右下角。设置样式以使其具有圆形形状和不透明度为0。使用:hover和transition属性，当鼠标悬停在元素上时，它将以不透明度1显示。

在CSS最后，使用:target伪类选择器将back-to-top元素与id为page-top的元素相关联。id为page-top的元素是一个空的锚点，它位于文档的顶部。在用户滚动页面以距离顶部一定距离时，它将成为当前URL的一部分，并将触发:target选择器的样式。当此选择器激活时，back-to-top元素将以不透明度1显示，并且使用scroll-margin-top属性将视口滚动一段距离，以避免在页面顶部再次显示back-to-top元素。

现在，需要在页面的顶部创建一个锚点。这可以通过在页面顶部创建一个具有id =“page-top”的元素来完成。例如：

<div id="page-top"></div> 

最后，在页面底部插入back-to-top元素：

<a href="#page-top" id="back-to-top">↑</a> 

现在，CSS滚动回到顶部的代码就完成了。它还是很容易实现的。在使用单页Web应用程序的情况下，它可以使用户轻松返回页面顶部。