HTML DOM scrollTop Property
Element ObjectExample
Get the number of pixels the content of a <div> element is scrolled horizontally and vertically:
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
More "Try it Yourself" examples below.
Definition and Usage
The scrollTop property sets or returns the number of pixels an element's content is scrolled vertically.
Tip: Use the scrollLeft property to set or return the number of pixels an element's content is scrolled horizontally.
Tip: To add scrollbars to an element, use the CSS overflow property.
Tip: The onscroll event occurs when an element's scrollbar is being scrolled.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| scrollTop | Yes | Yes | Yes | Yes | Yes |
Syntax
Return the scrollTop property:
Set the scrollTop property:
Property Values
| Value | Description |
|---|---|
| pixels |
Specifies the number of pixels the element's content is scrolled
vertically. Special notes:
|
Technical Details
| Return Value: | A Number, representing the number of pixels that the element's content has been scrolled vertically |
|---|
More Examples
Example
Scroll the contents of a <div> element TO 50 pixels horizontally and 10 pixels vertically:
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
Example
Scroll the contents of a <div> element BY 50 pixels horizontally and 10 pixels vertically:
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
Example
Scroll the contents of <body> by 30 pixels horizontally and 10 pixels vertically:
var html = document.documentElement; // Firefox and IE places the overflow at the <html> level, unless else is specified. Therefore, we use the documentElement property for these two browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;
Example
Toggle between class names on different scroll positions - When the user scrolls down 50 pixels from the top of the page, the class name "test" will be added to an element (and removed when scrolled up again).
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Example
Slide in an element when the user has scrolled down 350 pixels from the top of the page (add the slideUp class):
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
Example
Draw a triangle on scroll:
<svg id="mySVG">
<path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z">
</svg>
<script>
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();
// The start position of the drawing
triangle.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
triangle.style.strokeDashoffset = length - draw;
}
</script>
