如何防止回到顶部按钮（scroll to top button）覆盖页脚内容

实现该需求最简单的方案是在原有滚动监听逻辑中新增页脚位置判断，动态修改按钮的bottom定位值，全程仅需改动少量代码，无需调整原有DOM结构，兼容性表现优异。

核心修改点 #

• 滚动时实时计算视口底部与页脚顶部的距离
• 当视口底部即将接触页脚时，动态调整按钮的bottom值，保证按钮始终停留在页脚上方指定间距位置
• 可自定义按钮与页脚的预留间距，适配不同页脚高度场景

完整修改后代码 #

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  /* 可选：添加过渡让位置切换更顺滑 */
  transition: bottom 0.15s linear;
}

#myBtn:hover {
  background-color: #555;
}
footer {
  margin: 100px;
}
</style>
</head>
<body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">向下滚动</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">本示例演示如何创建一个“回到顶部”按钮，该按钮会在<strong>用户开始滚动页面</strong>时显示。</div>

<footer>
  这是页脚
</footer>

<script>
//获取按钮元素
var mybutton = document.getElementById("myBtn");

// 当用户从页面顶部向下滚动20px时显示按钮
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  const footer = document.querySelector('footer');
  const footerTop = footer.offsetTop;
  const viewportHeight = window.innerHeight;
  const gap = 20; // 按钮与页脚的最小预留间距，可自定义调整
  const defaultBottom = 20; // 按钮默认距离视口底部的距离，与CSS设置保持一致

  // 原有显示隐藏逻辑
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }

  // 新增动态调整按钮位置逻辑
  const scrollBottom = window.scrollY + viewportHeight;
  if (scrollBottom >= footerTop - gap) {
    mybutton.style.bottom = `${scrollBottom - (footerTop - gap) + defaultBottom}px`;
  } else {
    mybutton.style.bottom = `${defaultBottom}px`;
  }
}

// 当用户点击按钮时，滚动到页面顶部
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

</body>
</html>

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