CSS悬浮返回顶部按钮引发页面底部额外空白的解决咨询

问题根源 #

你给返回按钮用了position: sticky定位，这个属性的元素仍然会占据文档流中的原有空间，所以页面最后会留下和按钮高度一致的空白。哪怕用div包裹，也只是减少了部分额外间距，但核心的空间占用问题没解决。

修复方案 #

把按钮的定位改成position: fixed——fixed定位的元素会完全脱离文档流，不会占用页面布局空间，同时能保持悬浮效果。

修改后的CSS代码：

#arrowUp {
  position: fixed; /* 替换sticky为fixed */
  width: 50px;
  bottom: 120px;
  right: 20px; /* 用right代替margin-right，定位更直接 */
  background: #699462;
  border-radius: 10px;
  aspect-ratio: 1;
}

#arrowUp a {
  content: ""; /* 注意把中文引号改成英文引号，避免样式失效 */
  position: absolute;
  inset: 25%;
  transform: translateY(20%) rotate(-45deg);
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
}

额外注意点 #

• 原CSS里的content: “”;用了中文双引号，这会导致伪元素内容不生效，必须改成英文双引号""。
• 切换到fixed定位后，不需要margin-left: auto来实现右对齐，直接用right: 20px更简洁可靠。

这样修改后，页面底部的空白会完全消失，返回按钮也能正常悬浮在指定位置。

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