纯CSS锚点过渡效果，CSS3的属性scroll-behavior: smooth；轻松搞定置顶操作

要使用CSS来实现平滑滚动到页面顶部的效果，可以使用scroll-behavior属性。但是，scroll-behavior属性目前并不是所有浏览器都支持，它是一个较新的特性。

如果你的目标用户使用的浏览器支持这个属性，你可以这样做：

1. 将scroll-behavior属性设置为smooth在你想要平滑滚动的容器上，比如在body或html标签上。
2. 创建一个锚点，通常是一个链接指向页面顶部的某个元素。

示例代码：

html {
  scroll-behavior: smooth;
}

<!-- 创建一个锚点链接到页面顶部 -->
<a href="#top">回到顶部</a>
 
<!-- 设置一个锚点，通常是一个隐藏的元素 -->
<div id="top" style="display: none;"></div>

当用户点击“回到顶部”链接时，页面会平滑滚动到<div id="top"></div>这个位置，因为你已经在html标签上设置了scroll-behavior: smooth;，所以滚动会是平滑的。

如果scroll-behavior属性不被支持，你可能需要依赖JavaScript来实现相同的功能。这里是一个简单的JavaScript示例：

<!-- 创建一个点击回到顶部的按钮 -->
<button onclick="scrollToTop()">回到顶部</button>
 
<script>
function scrollToTop() {
  // 使用window.scrollTo平滑滚动到页面顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
</script>

在不支持scroll-behavior的浏览器中，这个JavaScript函数会在用户点击按钮时触发平滑滚动到页面顶部的效果。