如何仅用CSS实现滚动后显示返回顶部按钮并回顶后隐藏？

要实现仅在滚动一段距离后显示返回顶部按钮，且回顶后自动隐藏的效果，纯CSS可以做到，核心利用:has()伪类和锚点定位检测滚动状态，无需任何脚本。以下是具体实现步骤：

1. 调整HTML结构 #

在页面顶部下方（比如紧跟<header>之后）添加一个隐藏的触发锚点，用于检测滚动阈值：

<a id="scroll-trigger" class="scroll-trigger" href="#scroll-trigger"></a>
<!-- 你的返回顶部按钮 -->
<a href="#top" class="scroll-to-top">返回顶部</a>

同时确保页面顶部有#top锚点，比如给<html>标签添加id="top"：

<html id="top" ...>

2. 替换并完善CSS代码 #

替换你现有的CSS，实现按钮的初始隐藏、滚动触发显示、回顶后隐藏：

/* 隐藏触发锚点，仅用于检测滚动位置 */
.scroll-trigger {
  position: absolute;
  top: 200px; /* 滚动超过200px时显示按钮，可自行调整阈值 */
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 返回顶部按钮基础样式 */
.scroll-to-top {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden; /* 配合opacity彻底隐藏，避免残留点击区域 */
  transition: opacity 0.5s ease, visibility 0.5s ease; /* 平滑过渡效果 */
  /* 可自定义按钮样式 */
  background: #333;
  color: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: 50%;
  text-decoration: none;
}

/* 滚动超过阈值时，显示按钮 */
body:has(#scroll-trigger:target) .scroll-to-top {
  opacity: 1;
  visibility: visible;
}

/* 点击按钮回顶到#top时，隐藏按钮 */
body:target .scroll-to-top {
  opacity: 0;
  visibility: hidden;
}

关键说明 #

• 滚动阈值控制：修改.scroll-trigger的top属性值，即可调整按钮显示的滚动距离（比如设为300px，滚动超过300px时显示）。
• 短页面适配：如果页面总高度小于设置的阈值，按钮永远不会显示，自动适配无需滚动的短页面。
• 兼容性：:has()伪类已被现代主流浏览器支持（Chrome、Edge、Safari 15.4+），适配WordPress FSE场景无压力。
• 平滑回顶：若需要回顶时的平滑动画，可给<html>标签添加：

html {
  scroll-behavior: smooth;
}

内容的提问来源于stack exchange，提问作者Proximitas