JavaScript window.scrollTo
last modified April 2, 2025
In this article, we explore the window.scrollTo method in
JavaScript. This method is essential for controlling page scrolling behavior,
allowing developers to programmatically scroll to specific positions.
Basic Definition
The window.scrollTo method scrolls the window to a particular set
of coordinates in the document. It accepts either x and y coordinates or a
scroll options object for smooth scrolling.
This method is particularly useful for creating custom scrolling experiences, such as scroll-to-top buttons, navigation to specific sections, or animated scrolling effects.
Basic scrollTo with Coordinates
This example demonstrates how to scroll to specific coordinates on the page.
<!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>
In this basic example, we have a long page with a button at the bottom. When
clicked, it uses window.scrollTo(0, 0) to scroll back to the top.
The first parameter is the x-coordinate (horizontal), and the second is the y-coordinate (vertical). This demonstrates the simplest way to use scrollTo.
Smooth Scrolling with Options
This example shows how to achieve smooth scrolling using the options parameter.
<!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>
Here we use the object parameter version of scrollTo with the
behavior: 'smooth' option. This creates an animated scrolling
effect rather than an instant jump.
The options object provides more control over scrolling behavior. The
behavior property can be 'auto' (default) or 'smooth'.
Scrolling to a Specific Element
This example demonstrates how to scroll to a specific element on the page.
<!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>
In this example, we first get the target element using
getElementById, then scroll to its position using its
offsetTop property.
This technique is commonly used for navigation menus that scroll to different
sections of a page. The offsetTop property gives the distance from
the top of the document.
Horizontal Scrolling
This example shows how to use scrollTo for horizontal scrolling.
<!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>
Here we create a very wide container and buttons to scroll horizontally. The
functions use window.scrollX to get the current position.
This demonstrates how scrollTo can be used for horizontal scrolling by manipulating the left property. The functions scroll 500 pixels in either direction from the current position.
Scroll Position Tracking
This example shows how to track scroll position and scroll to specific points.
<!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>
This example tracks the current scroll position using the scroll event and displays it. The button scrolls to the halfway point of the document.
The scrollHeight property gives the total height of the document,
allowing us to calculate positions relative to the document size.
Source
In this article, we have shown how to use window.scrollTo in
JavaScript. This method is fundamental for creating controlled scrolling
experiences in web applications.
Author
List all JS DOM tutorials.