JavaScript window.scrollTo
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 window.scrollTo 方法。此方法对于控制页面滚动行为至关重要，允许开发人员以编程方式滚动到特定位置。
基本定义
window.scrollTo 方法将窗口滚动到文档中的特定坐标。它可以接受 x 和 y 坐标，或用于平滑滚动的滚动选项对象。
此方法对于创建自定义滚动体验特别有用，例如置顶按钮、导航到特定部分或动画滚动效果。
使用坐标进行基本 scrollTo
此示例演示了如何滚动到页面上的特定坐标。
<!DOCTYPE html>
<html>
<head>
<title>Basic scrollTo</title>
<style>
body { height: 2000px; }
button { position: fixed; bottom: 20px; right: 20px; }
</style>
</head>
<body>
<h1>Scroll Down</h1>
<div style="height: 1000px;"></div>
<button onclick="scrollToTop()">Scroll To Top</button>
<script>
function scrollToTop() {
window.scrollTo(0, 0);
}
</script>
</body>
</html>
在此基本示例中，我们有一个长页面，底部有一个按钮。点击时，它使用 window.scrollTo(0, 0) 滚动回顶部。
第一个参数是 x 坐标（水平），第二个参数是 y 坐标（垂直）。这演示了 scrollTo 最简单的用法。
使用选项进行平滑滚动
此示例展示了如何使用选项参数实现平滑滚动。
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scrolling</title>
<style>
body { height: 2000px; }
button { position: fixed; bottom: 20px; right: 20px; }
</style>
</head>
<body>
<h1>Scroll Down</h1>
<div style="height: 1000px;"></div>
<button onclick="smoothScrollToTop()">Smooth Scroll To Top</button>
<script>
function smoothScrollToTop() {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
</script>
</body>
</html>
在这里，我们将 scrollTo 的对象参数与 behavior: 'smooth' 选项一起使用。这会创建一个动画滚动效果，而不是即时跳转。
选项对象提供了对滚动行为的更多控制。behavior 属性可以是 'auto'（默认）或 'smooth'。
滚动到特定元素
此示例演示了如何滚动到页面上的特定元素。
<!DOCTYPE html>
<html>
<head>
<title>Scroll to Element</title>
<style>
body { height: 2000px; }
#target {
margin-top: 800px;
padding: 20px;
background: lightblue;
}
</style>
</head>
<body>
<button onclick="scrollToElement()">Scroll to Element</button>
<div id="target">This is the target element</div>
<script>
function scrollToElement() {
const element = document.getElementById('target');
window.scrollTo({
top: element.offsetTop,
behavior: 'smooth'
});
}
</script>
</body>
</html>
在此示例中，我们首先使用 getElementById 获取目标元素，然后使用其 offsetTop 属性滚动到其位置。
此技术通常用于将用户导航到页面不同部分的菜单。offsetTop 属性给出从文档顶部开始的距离。
水平滚动
此示例展示了如何使用 scrollTo 进行水平滚动。
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scrolling</title>
<style>
.container {
width: 5000px;
height: 100vh;
background: linear-gradient(to right, red, blue);
}
button { position: fixed; bottom: 20px; }
</style>
</head>
<body>
<div class="container"></div>
<button onclick="scrollRight()">Scroll Right</button>
<button onclick="scrollLeft()" style="right: 20px;">Scroll Left</button>
<script>
function scrollRight() {
window.scrollTo({
left: window.scrollX + 500,
behavior: 'smooth'
});
}
function scrollLeft() {
window.scrollTo({
left: window.scrollX - 500,
behavior: 'smooth'
});
}
</script>
</body>
</html>
在这里，我们创建了一个非常宽的容器和用于水平滚动的按钮。这些函数使用 window.scrollX 获取当前位置。
这演示了如何通过操作 left 属性来使用 scrollTo 进行水平滚动。这些函数从当前位置向任一方向滚动 500 像素。
滚动位置跟踪
此示例展示了如何跟踪滚动位置并滚动到特定点。
<!DOCTYPE html>
<html>
<head>
<title>Scroll Tracking</title>
<style>
body { height: 2000px; }
#position { position: fixed; top: 10px; left: 10px; }
button { position: fixed; bottom: 20px; }
</style>
</head>
<body>
<div id="position">Scroll position: 0</div>
<button onclick="scrollToHalf()">Scroll to Halfway</button>
<script>
window.addEventListener('scroll', function() {
document.getElementById('position').textContent =
`Scroll position: ${window.scrollY}`;
});
function scrollToHalf() {
const halfway = document.body.scrollHeight / 2;
window.scrollTo({
top: halfway,
behavior: 'smooth'
});
}
</script>
</body>
</html>
此示例使用 scroll 事件跟踪当前滚动位置并显示它。按钮滚动到文档的中间点。
scrollHeight 属性给出文档的总高度，使我们能够计算相对于文档大小的位置。
来源
在本文中，我们展示了如何在 JavaScript 中使用 window.scrollTo。此方法对于在 Web 应用程序中创建受控滚动体验至关重要。
作者
列出 所有 JS DOM 教程。