如何通过CSS实现滚动前隐藏WordPress站点的返回顶部/底部按钮？

要实现滚动一段距离后才显示这两个按钮，纯CSS完全可行，给你适配现有按钮的解决方案：

第一步：调整HTML结构 #

把按钮的内联样式移到CSS中，给每个按钮容器添加统一类名，方便批量控制：

<div class="scroll-btn scroll-top">
  <a href="#top">
    <img class="lazyloaded" src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Top.svg" data-src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Top.svg" alt="返回顶部" width="40" height="40">
  </a>
</div>
<div class="scroll-btn scroll-bottom">
  <a href="#fin">
    <img class="lazyloaded" src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Bottom.svg" data-src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Bottom.svg" alt="前往底部" width="40" height="40">
  </a>
</div>

第二步：编写CSS样式 #

利用CSS滚动驱动动画实现滚动触发显示，同时添加过渡效果让显示更自然：

/* 按钮基础样式，初始状态隐藏 */
.scroll-btn {
  position: fixed;
  right: 25px;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 分别设置两个按钮的垂直位置 */
.scroll-top {
  bottom: 70px;
}
.scroll-bottom {
  bottom: 25px;
}

/* 滚动触发的显示动画 */
@keyframes show-on-scroll {
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* 绑定滚动事件：滚动超过100vh（一屏高度）时触发显示 */
.scroll-btn {
  animation: show-on-scroll linear;
  animation-timeline: scroll(root);
  /* 可修改100vh调整触发距离，比如50vh就是滚动半屏后显示 */
  animation-range: 100vh infinite;
}

之前方法失效的原因 #

你尝试的margin-top:100vh只是给元素添加外边距，和滚动显示逻辑无关；那篇教程的代码依赖特定页面结构（比如锚点位置），你的无限滚动页面结构不匹配，所以没起作用。

兼容性说明 #

这套方案用的是现代CSS特性，Chrome 115+、Firefox 117+等主流浏览器都支持。如果需要兼容更老的浏览器，可以用几行极简JS辅助（监听滚动事件控制显示），但纯CSS场景下优先推荐这个方案。

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