1. 问题分析：为什么 document.body.scrollTop 始终为零？
在实现“滚动到顶部”功能时，开发者通常会监听 window 对象的 scroll 事件，并通过检查 document.body.scrolltop 或 document.documentelement.scrolltop 来判断用户是否已向下滚动了足够距离。然而，在某些复杂的网页布局中，尤其是当 body 元素被设置了 overflow: hidden，而实际可滚动内容被包裹在一个具有 overflow-y: auto 或 overflow: scroll 属性的子容器中时，document.body.scrolltop 和 document.documentelement.scrolltop 将始终返回0。
这是因为，当 body 或 html 元素被阻止滚动（例如 overflow: hidden），而页面的实际滚动行为发生在某个内部元素（如一个 div 容器）上时，标准的 document.body.scrollTop 或 document.documentElement.scrollTop 无法反映该内部元素的滚动位置。在这种情况下，正确的滚动位置信息存储在实际发生滚动的那个元素上。
在提供的代码中，body 元素被设置了 overflow: hidden;，而一个名为 wrapper 的 div 元素被设置了 height: 100vh; 和 overflow-y: auto;。这意味着页面的实际滚动条是 wrapper 元素上的滚动条，而不是 body 或 html 元素的滚动条。因此，尝试通过 document.body.scrollTop 或 document.documentElement.scrollTop 获取滚动位置将始终得到0。
2. 解决方案：使用 window.scrollY 或 window.pageYOffset
要解决这个问题，我们需要使用能够准确获取整个视口（viewport）滚动位置的属性。在现代浏览器中，window.scrollY (或其别名 window.pageYOffset) 是获取当前文档在垂直方向上已滚动的像素值的标准方式。这些属性直接反映了用户在浏览器窗口中滚动的距离，无论实际滚动条是属于 body、html 还是某个内部元素。
2.1 JavaScript 代码修正
将原有的滚动检测逻辑替换为 window.scrollY，可以确保正确判断滚动距离。
// 获取滚动到顶部按钮元素
const scrollButton = document.getElementById("scroll-button");
// 监听窗口的滚动事件
window.addEventListener('scroll', scrollFunction);
function scrollFunction() {
// 使用 window.scrollY 来判断页面垂直滚动距离
// 当滚动距离超过20像素时显示按钮，否则隐藏
if (window.scrollY > 20) {
scrollButton.style.display = "block";
} else {
scrollButton.style.display = "none";
}
}
// 绑定按钮点击事件，实现平滑滚动到顶部
scrollButton.addEventListener("click", topFunction);
function topFunction() {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth" // 平滑滚动效果
});
}
// 确保在DOM加载完成后执行其他初始化脚本
$(document).ready(function () {
// 其他初始化代码，例如汉堡菜单、深色/浅色模式切换等
// Hamburger
$(".burger-container").click(function () {
$(".nav-menu").toggleClass("menu-opened");
$("body").toggleClass("unscrollable");
});
// Dark-Light switcher
$("body").toggleClass("light", localStorage.toggled == "light");
document.getElementById("checkBox").addEventListener("click", darkLight);
function darkLight() {
if (localStorage.toggled != "light") {
$("body").toggleClass("light", true);
localStorage.toggled = "light";
} else {
$("body").toggleClass("light", false);
localStorage.toggled = "";
}
}
if ($("body").hasClass("light")) {
$("#checkBox").prop("checked", true);
} else {
$("#checkBox").prop("checked", false);
}
});注意事项：
- 将 button 变量名改为 scrollButton 以避免与全局的 button 标签名混淆，提高代码可读性。
- 将 window.onscroll 替换为 window.addEventListener('scroll', scrollFunction); 是更推荐的事件监听方式，因为它允许添加多个事件处理程序而不会覆盖。
- scrollButton 的获取应该在DOM元素可用之后，如果脚本在 body 结束标签之前加载，且没有 defer 属性，则需要将其放在 DOMContentLoaded 事件监听器中。在提供的HTML中，script.js 有 defer 属性，所以直接在文件顶部获取元素是可行的。
2.2 CSS 布局审查
虽然JavaScript的修正是核心，但理解导致问题发生的CSS布局也至关重要。
原始CSS片段：
body {
width: 100%;
height: 100%;
background-color: var(--body-bg-color) !important;
position: relative;
overflow: hidden; /* 关键：阻止body滚动 */
font-family: "Nunito", sans-serif;
color: var(--white-color);
}
.wrapper {
height: 100vh; /* 确保wrapper占满视口高度 */
overflow-y: auto; /* 关键：使wrapper可垂直滚动 */
overflow-x: hidden;
perspective: 10px;
}这段CSS明确将页面的滚动行为从 body 转移到了 .wrapper 元素。overflow: hidden 在 body 上阻止了其自身的滚动，而 overflow-y: auto 在 .wrapper 上创建了一个独立的滚动上下文。这正是 document.body.scrollTop 始终为0的根本原因。
3. 优化与最佳实践
- 性能考量： scroll 事件触发频率很高，频繁操作DOM可能会导致性能问题。对于复杂的滚动效果，可以考虑使用节流（throttle）或防抖（debounce）来限制 scrollFunction 的执行频率。
- 用户体验： window.scrollTo({ behavior: 'smooth' }) 提供了平滑的滚动体验，优于传统的 window.scrollTo(0, 0)。
- 可访问性： 确保滚动按钮有明确的 aria-label 或 title 属性，以便屏幕阅读器用户理解其功能。
- 按钮样式： 确保按钮的 z-index 足够高 (z-index: 998;)，使其始终显示在其他内容之上。其 position: fixed; 属性是实现固定定位的关键。
4. 总结
当“滚动到顶部”按钮无法正常显示时，首先应检查页面的CSS布局，特别是 body 和主要内容容器的 overflow 属性。如果 body 被设置为 overflow: hidden 而内容在一个子元素中滚动，那么 document.body.scrollTop 或 document.documentElement.scrollTop 将不再适用。在这种情况下，使用 window.scrollY (或 window.pageYOffset) 是获取正确滚动位置的有效且推荐的方法。通过上述JavaScript代码的修正，可以确保“滚动到顶部”功能在各类复杂布局下稳定可靠地运行。
