纯CSS实现页面≤110vh时隐藏返回顶部按钮方案

算力阿峰

2026-8-30

纯CSS返回顶部按钮优化方案

1. 按钮定位到页面右侧

原代码使用place-self: end仅指定了纵向（块方向）的底部对齐，横向（内联方向）默认继承起始对齐（左侧），直接修改属性即可实现右下角定位：

方案一（适配原有grid布局）：将.top样式中的place-self: end改为place-self: end end，第一个值控制纵向底部对齐，第二个值控制横向右侧对齐。
方案二（兼容性更好）：保留原有place-self: end，新增margin-left: auto属性，利用块级元素自动边距特性将按钮推到右侧。

2. 短页面（内容高度≤110vh）自动隐藏按钮

使用CSS容器查询特性实现，无需JS，无需额外修改模板判断逻辑，步骤如下：

给body元素新增容器属性，将其标记为可查询尺寸的容器，同时指定高度自适应内容，避免容器高度坍缩：

body {
  container-name: page-container;
  container-type: size;
  block-size: fit-content;
}

新增容器查询规则，当页面内容总高度小于等于110vh时，自动隐藏返回顶部按钮：

@container page-container (max-block-size: 110vh) {
  .top {
    display: none;
  }
}

兼容性说明：该方案支持Chrome 105+、Firefox 110+、Safari 16+，覆盖全球92%以上的活跃用户。如果需要兼容更低版本浏览器，可以搭配@supports做降级处理，不支持容器查询的环境下自动 fallback 到现有Zola阅读时长判断逻辑即可。

完整修改后的核心样式代码

body {
  container-name: page-container;
  container-type: size;
  block-size: fit-content;
}
.top {
  position: sticky;
  bottom: 9px;
  padding: 9px;
  place-self: end end; /* 替换原有的place-self: end */
  margin-top: 109vh;

  font-weight:700;
  border-radius: 9px;
  color: var(--a1);
  background: var(--c2);
}
.top:hover {
  color: var(--c2);
  background: var(--a1);
  text-decoration: none;
}
@container page-container (max-block-size: 110vh) {
  .top {
    display: none;
  }
}