如何消除由sticky返回顶部按钮导致的页面底部空白

问题根源 #

Sticky定位的元素仍处于文档流中，你设置的margin-top: calc(100vh + var(--offset))会给页面添加额外的垂直空间，这就是底部空白的直接原因。以下两种方案可以同时保留预期样式并消除空白：

方案一：修正Sticky布局，脱离文档流 #

通过给按钮包裹一个绝对定位的容器，让容器不占用文档流空间，同时按钮在容器内保持Sticky特性：

修改后的HTML结构

<nav>
  navbar
</nav>
<div>
  caroussel
</div>
<div>
  some images
</div>

<!-- 新增容器包裹返回顶部按钮 -->
<div class="top-btn-container">
  <button onclick="to_top()" id="top_btn">
    <img src="Icons/uparrow.png" id="top_ico">
  </button>
</div>

<div>
 footer
</div>

修改后的CSS

/* 容器绝对定位，不占用文档流空间 */
.top-btn-container {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  pointer-events: none; /* 避免容器干扰其他元素点击 */
}

#top_btn 
{
    --offset: 50px; 
    position: sticky;
    bottom: 20px;      
    margin-right: 15px;
    margin-top: calc(100vh + var(--offset));
    padding: 10px;
    background: #013328;
    color: #e3dcd2;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 9px #666;
    pointer-events: auto; /* 恢复按钮的点击能力 */
}

#top_ico
{
    height: 40px;
    width: 40px;
}

#top_btn:hover 
{
    background-color: #013328;
}
  
#top_btn:active 
{
    background-color: #013328;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

方案二：Fixed定位配合JS控制显示/隐藏 #

Fixed定位完全脱离文档流，不会产生底部空白，通过监听滚动事件实现“初始隐藏、滚动后显示”的效果：

修改后的CSS

#top_btn 
{
    position: fixed;
    right: 15px;
    bottom: 20px;      
    padding: 10px;
    background: #013328;
    color: #e3dcd2;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 9px #666;
    display: none; /* 初始状态隐藏 */
}

#top_ico
{
    height: 40px;
    width: 40px;
}

#top_btn:hover 
{
    background-color: #013328;
}
  
#top_btn:active 
{
    background-color: #013328;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

新增滚动监听JS代码

function to_top() 
{
    document.documentElement.scrollTop = 0; 
    document.body.scrollTop = 0;
}

// 监听滚动事件，控制按钮显示/隐藏
window.addEventListener('scroll', function() {
  const topBtn = document.getElementById('top_btn');
  // 滚动超过视口高度一半时显示按钮，可自行调整阈值
  if (window.scrollY > window.innerHeight / 2) {
    topBtn.style.display = 'block';
  } else {
    topBtn.style.display = 'none';
  }
});

内容的提问来源于stack exchange，提问作者Bilal El Badaoui