JavaScript scrollTop
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 element.scrollTop 属性。此属性对于控制和监控网页元素垂直滚动位置至关重要。
基本定义
scrollTop 属性用于获取或设置元素内容垂直滚动的像素数。读取时，它返回元素顶部到其最顶部可见内容之间的距离。
对于文档元素，document.documentElement.scrollTop 返回整个页面的垂直滚动位置。对于其他元素，它返回它们的内部滚动位置。
获取页面滚动位置
此示例演示了如何获取页面的当前滚动位置。
<!DOCTYPE html>
<html>
<head>
<title>Get Page Scroll Position</title>
<style>
body { height: 2000px; }
</style>
</head>
<body>
<button onclick="showScroll()">Show Scroll Position</button>
<p id="output"></p>
<script>
function showScroll() {
const scrollPosition = document.documentElement.scrollTop ||
document.body.scrollTop;
document.getElementById('output').textContent =
`Current scroll position: ${scrollPosition}px`;
}
</script>
</body>
</html>
在此示例中，我们创建了一个很高的页面和一个显示当前滚动位置的按钮。showScroll 函数同时检查 document.documentElement.scrollTop 和 document.body.scrollTop 以实现跨浏览器兼容性。
使用 OR 运算符 (||) 是因为不同的浏览器可能使用不同的元素来跟踪页面滚动位置。这是处理浏览器不一致性的常用模式。
滚动到特定位置
此示例显示了如何以编程方式将页面滚动到特定位置。
<!DOCTYPE html>
<html>
<head>
<title>Scroll to Position</title>
<style>
body { height: 2000px; }
#target {
position: absolute;
top: 800px;
color: red;
}
</style>
</head>
<body>
<button onclick="scrollToTarget()">Scroll to Target</button>
<div id="target">This is the target position</div>
<script>
function scrollToTarget() {
window.scrollTo({
top: 800,
behavior: 'smooth'
});
}
</script>
</body>
</html>
在这里，我们使用 window.scrollTo() 将页面滚动到特定位置（距离顶部 800 像素）。behavior: 'smooth' 选项创建了平滑的滚动动画，而不是立即跳转。
虽然此示例使用了 window.scrollTo，但您也可以直接设置 element.scrollTop 来滚动单个元素。平滑滚动行为是一项现代功能，可能在旧版浏览器中不起作用。
滚动单个元素
此示例演示了如何控制可滚动 div 的滚动位置。
<!DOCTYPE html>
<html>
<head>
<title>Scrollable Div</title>
<style>
#scrollable {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #ccc;
}
#content {
height: 1000px;
padding: 10px;
}
</style>
</head>
<body>
<div id="scrollable">
<div id="content">Scrollable content...</div>
</div>
<button onclick="scrollDiv()">Scroll Div to 300px</button>
<script>
function scrollDiv() {
const div = document.getElementById('scrollable');
div.scrollTop = 300;
}
</script>
</body>
</html>
在此示例中，我们创建了一个具有溢出内容的滚动 div。scrollDiv 函数将 div 的 scrollTop 属性设置为 300 像素，从而向下滚动其内容。
这表明 scrollTop 不仅适用于整个页面，也适用于单个元素。元素必须将其 overflow 属性设置为 auto 或 scroll 才能发生滚动。
创建滚动指示器
此示例创建了一个视觉指示器，显示页面已滚动多远。
<!DOCTYPE html>
<html>
<head>
<title>Scroll Indicator</title>
<style>
body { height: 2000px; }
#progressBar {
position: fixed;
top: 0;
left: 0;
height: 5px;
background: red;
width: 0%;
}
</style>
</head>
<body>
<div id="progressBar"></div>
<h1>Scroll down to see the progress bar in action</h1>
<script>
window.addEventListener('scroll', function() {
const winScroll = document.body.scrollTop ||
document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById('progressBar').style.width =
scrolled + '%';
});
</script>
</body>
</html>
此代码在页面顶部创建了一个红色进度条，用户向下滚动时进度条会填充。滚动事件监听器计算页面已滚动百分比并更新进度条的宽度。
计算涉及将当前滚动位置与页面的总可滚动高度进行比较。这创建了用户在页面内容中进度的可视化表示。
返回顶部按钮
此示例实现了一个常见的“返回顶部”按钮，该按钮在用户向下滚动时出现，并在单击时平滑滚动回顶部。
<!DOCTYPE html>
<html>
<head>
<title>Back to Top Button</title>
<style>
body { height: 2000px; }
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
padding: 10px;
background: #333;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="backToTop" onclick="scrollToTop()">↑ Top</button>
<script>
window.addEventListener('scroll', function() {
const btn = document.getElementById('backToTop');
if (document.documentElement.scrollTop > 300) {
btn.style.display = 'block';
} else {
btn.style.display = 'none';
}
});
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
</script>
</body>
</html>
此实现根据滚动位置显示/隐藏返回顶部按钮。单击时，它使用具有平滑行为的 window.scrollTo 将页面平滑滚动回顶部。
按钮最初使用 display: none 隐藏，并且仅在用户滚动超过 300 像素时出现。这可以防止在不需要时显示按钮。
来源
在本文中，我们探讨了 JavaScript 中的 scrollTop 属性。我们已经看到如何使用它来获取和设置滚动位置、创建滚动指示器以及实现常见的 UI 模式，如返回顶部按钮。
作者
列出 所有 JS DOM 教程。