JavaScript scrollTop
last modified April 2, 2025
In this article, we explore the element.scrollTop property in
JavaScript. This property is essential for controlling and monitoring the
vertical scroll position of elements in web pages.
Basic Definition
The scrollTop property gets or sets the number of pixels that an
element's content is scrolled vertically. When read, it returns the distance
from the element's top to its topmost visible content.
For the document element, document.documentElement.scrollTop
returns the vertical scroll position of the entire page. For other elements,
it returns their internal scroll position.
Getting Page Scroll Position
This example demonstrates how to get the current scroll position of the page.
<!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>
In this example, we create a tall page and a button to show the current scroll
position. The showScroll function checks both
document.documentElement.scrollTop and
document.body.scrollTop for cross-browser compatibility.
The OR operator (||) is used because different browsers may use
different elements to track the page scroll position. This is a common pattern
for handling browser inconsistencies.
Scrolling to a Specific Position
This example shows how to programmatically scroll the page to a specific position.
<!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>
Here we use window.scrollTo() to scroll the page to a specific
position (800px from the top). The behavior: 'smooth' option
creates a smooth scrolling animation instead of an immediate jump.
While this example uses window.scrollTo, you can also set
element.scrollTop directly to scroll individual elements.
The smooth scrolling behavior is a modern feature that may not work in older
browsers.
Scrolling an Individual Element
This example demonstrates how to control the scroll position of a scrollable 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>
In this example, we create a scrollable div with overflow content. The
scrollDiv function sets the scrollTop property
of the div to 300 pixels, scrolling its content downward.
This shows how scrollTop works with individual elements, not just
the entire page. The element must have its overflow property set
to auto or scroll for scrolling to occur.
Creating a Scroll Indicator
This example creates a visual indicator showing how far the page has been scrolled.
<!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>
This code creates a red progress bar at the top of the page that fills as the user scrolls down. The scroll event listener calculates the percentage of the page that has been scrolled and updates the width of the progress bar.
The calculation involves comparing the current scroll position to the total scrollable height of the page. This creates a visual representation of the user's progress through the page content.
Back to Top Button
This example implements a common "back to top" button that appears when the user scrolls down and smoothly scrolls back to the top when clicked.
<!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>
This implementation shows/hides the back-to-top button based on the scroll
position. When clicked, it smoothly scrolls the page back to the top using
window.scrollTo with smooth behavior.
The button is initially hidden with display: none and only appears
when the user scrolls beyond 300 pixels. This prevents the button from being
visible when it's not needed.
Source
In this article, we have explored the scrollTop property in
JavaScript. We've seen how it can be used to get and set scroll positions,
create scroll indicators, and implement common UI patterns like back-to-top
buttons.
Author
List all JS DOM tutorials.