JavaScript window.scrollBy
last modified April 2, 2025
In this article, we explore the window.scrollBy method in
JavaScript. This method is essential for controlling page scrolling
programmatically, allowing smooth navigation experiences.
Basic Definition
The window.scrollBy method scrolls the document in the window by
the given amount. It accepts x and y coordinates as parameters to determine
how much to scroll horizontally and vertically.
Unlike window.scrollTo which scrolls to absolute positions,
scrollBy scrolls relative to the current position. This makes it
ideal for incremental scrolling effects.
Basic scrollBy Example
This example demonstrates the simplest usage of window.scrollBy
to scroll down the page by 100 pixels when a button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>Basic scrollBy</title>
<style>
body { height: 2000px; }
button { position: fixed; }
</style>
</head>
<body>
<button onclick="scrollDown()">Scroll Down</button>
<script>
function scrollDown() {
window.scrollBy(0, 100);
}
</script>
</body>
</html>
In this basic example, we have a long page and a fixed-position button. When
clicked, it calls scrollDown which uses window.scrollBy
to scroll down by 100 pixels vertically (y-axis).
The first parameter (0) controls horizontal scrolling, while the second (100) controls vertical scrolling. Negative values would scroll in the opposite direction.
Smooth Scrolling Behavior
This example shows how to enable smooth scrolling behavior with
window.scrollBy using the options parameter.
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scrolling</title>
<style>
body { height: 2000px; }
button { position: fixed; top: 20px; }
</style>
</head>
<body>
<button onclick="smoothScroll()">Smooth Scroll</button>
<script>
function smoothScroll() {
window.scrollBy({
top: 300,
left: 0,
behavior: 'smooth'
});
}
</script>
</body>
</html>
Here we use the object parameter version of scrollBy which allows
for more configuration options. The behavior: 'smooth' property
enables animated scrolling instead of the default instant jump.
This provides a more polished user experience, especially for larger scroll distances. The animation duration and timing function are browser-dependent.
Horizontal Scrolling
This example demonstrates horizontal scrolling using window.scrollBy
with a horizontal container.
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scrolling</title>
<style>
.container {
display: flex;
width: 3000px;
height: 200px;
background-color: #f0f0f0;
}
.item {
width: 300px;
height: 200px;
margin: 10px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
<button onclick="scrollRight()">Scroll Right</button>
<button onclick="scrollLeft()">Scroll Left</button>
<script>
function scrollRight() {
window.scrollBy(300, 0);
}
function scrollLeft() {
window.scrollBy(-300, 0);
}
</script>
</body>
</html>
In this example, we have a wide container with several items and two buttons.
The buttons use scrollBy to scroll horizontally by 300 pixels in
either direction.
Positive x-values scroll right, negative scroll left. This technique is useful for creating horizontal galleries or carousels with custom navigation controls.
Scroll By Page Height
This example shows how to scroll by the full viewport height using
window.innerHeight with scrollBy.
<!DOCTYPE html>
<html>
<head>
<title>Page Height Scrolling</title>
<style>
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
section:nth-child(odd) { background: #f0f0f0; }
section:nth-child(even) { background: #e0e0e0; }
</style>
</head>
<body>
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<button onclick="scrollPageDown()">Next Section</button>
<script>
function scrollPageDown() {
window.scrollBy({
top: window.innerHeight,
behavior: 'smooth'
});
}
</script>
</body>
</html>
Here we have a page with full-viewport-height sections. The button scrolls to
the next section by using window.innerHeight as the scroll amount.
This creates a common "scroll snapping" effect seen in modern single-page applications. The smooth behavior enhances the user experience between sections.
Conditional Scrolling
This example demonstrates conditional scrolling that stops when reaching certain boundaries.
<!DOCTYPE html>
<html>
<head>
<title>Conditional Scrolling</title>
<style>
body { height: 2000px; }
#progress {
position: fixed;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<button onclick="smartScroll()">Smart Scroll</button>
<div id="progress">Scroll Progress: 0%</div>
<script>
function smartScroll() {
const scrollAmount = 100;
const maxScroll = document.body.scrollHeight - window.innerHeight;
if (window.scrollY + scrollAmount <= maxScroll) {
window.scrollBy(0, scrollAmount);
} else {
window.scrollTo(0, maxScroll);
alert("Reached bottom of page!");
}
// Update progress indicator
const progress = Math.round((window.scrollY / maxScroll) * 100);
document.getElementById('progress').textContent =
`Scroll Progress: ${progress}%`;
}
</script>
</body>
</html>
This example implements a "smart" scroll that checks if there's enough content remaining before scrolling. It also updates a progress indicator showing how far down the page the user has scrolled.
The code calculates the maximum possible scroll position and prevents scrolling
beyond it. When near the bottom, it uses scrollTo for precise
positioning and shows an alert.
Source
In this article, we have explored the window.scrollBy method with
various practical examples. This method is powerful for creating custom scroll
behaviors and enhancing user navigation experiences.
Author
List all JS DOM tutorials.