页面滚动时显示/隐藏回到顶部/底部浮动按钮异常求助

问题原因 #

1. 初始状态未初始化：页面加载完成后未主动触发scrollFunction，导致回到底部按钮（toBottom）初始为display: none，即使在顶部区域也不会自动显示。
2. 滚动距离获取的浏览器兼容性问题：直接分别判断document.body.scrollTop和document.documentElement.scrollTop，可能在部分浏览器中出现取值不一致的情况，导致状态判断逻辑出错。
3. 回到底部函数的滚动目标不准确：原botFunction中使用document.body.clientHeight作为滚动目标，无法确保滚动到页面真正的底部。

修复后的完整代码 #

JavaScript #

// 监听滚动事件
window.onscroll = scrollFunction;

// 页面加载时初始化按钮状态
window.onload = scrollFunction;

function scrollFunction() {
  // 统一获取当前滚动距离，兼容不同浏览器
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  
  if (scrollTop > 300) {
    document.getElementById("toTop").style.display = "inline";
    document.getElementById("toBottom").style.display = "none";
  } else {
    document.getElementById("toTop").style.display = "none";
    document.getElementById("toBottom").style.display = "inline";
  }
}

// 回到顶部
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

// 回到底部
function botFunction() {
  // 计算页面可滚动的最大距离，确保滚到底部
  const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  document.body.scrollTop = scrollHeight;
  document.documentElement.scrollTop = scrollHeight;
}

CSS #

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}
#toTop {
  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;
}
#toTop:hover {
  background-color: #555;
}
#toBottom {
  display: none;
  position: fixed;
  top: 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;
}
#toBottom:hover {
  background-color: #555;
}

HTML #

0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> 
0<br><br> 1<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br>

<button onclick="topFunction()" id="toTop" title="Go to top">↑</button>
<button onclick="botFunction()" id="toBottom" title="Go to bottom">↓</button>

关键修复点 #

• 页面加载时调用scrollFunction，确保初始状态正确显示对应按钮
• 统一滚动距离的获取方式const scrollTop = document.body.scrollTop || document.documentElement.scrollTop，解决浏览器兼容性问题
• 修正回到底部的滚动目标计算，确保滚动到页面最底部

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