CSS如何设置返回顶部？假设我们现在有一个网页，当用户浏览页面时，我们希望他们可以轻松地返回到页面顶部。以下是如何用CSS实现此功能的方法：

.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
.scroll-to-top.show {
display: inline-block;
}
.scroll-to-top:hover {
transform: translateY(-5px);
}

以上是我们所需的CSS样式。首先，我们定义一个“scroll-to-top”的类，用于表示返回顶部的按钮。此类被设置为“fixed”定位，这意味着它的位置不会受到页面滚动的影响。

接下来，我们给这个类设置了一个名称为“show”的样式，这个样式可以用于在需要时显示返回顶部的按钮。另外，当用户将鼠标悬停在按钮上时，我们还添加了一个hover样式，将返回顶部按钮向上移动5个像素。

现在，我们将CSS与HTML结合使用，创建一个简单的按钮，并在需要时显示它：

<button onclick="topFunction()" class="scroll-to-top" id="myBtn">
返回顶部
</button>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").classList.add("show");
} else {
document.getElementById("myBtn").classList.remove("show");
}
}
function topFunction() {
document.body.scrollTop = 0; 
document.documentElement.scrollTop = 0; 
}
</script>

我们在按钮上添加了一个onclick事件，该事件将用户返回到页面顶部。此外，在JavaScript中，我们还为窗口滚动事件添加了“scrollFunction”函数，该函数检查用户是否在页面上向下滚动。如果用户滚动超过20个像素，我们将向按钮添加“show”类，这样就可以显示该按钮。

简而言之，我们可以使用这些简单的CSS和JavaScript代码让用户方便地返回页面顶部。希望这篇文章对您有所帮助！