Latest web development tutorials
 

HTML DOM scrollTop Propery

< Element Object

Example

Get the number of pixels the content of a <div> element is scrolled horizontally and vertically:

var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
Try it Yourself »

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:

element.scrollTop

Set the scrollTop property:

element.scrollTop=pixels

Property Values

Value Description
pixels Specifies the number of pixels the element's content is scrolled vertically.

Special notes:
  • If the number is a negative value, the number is set to "0"
  • If the element cannot be scrolled, the number is set to "0"
  • If the number is greater than the maximum allowed scroll amount, the number is set to the maximum number

Technical Details

Return Value: A Number, representing the number of pixels that the element's content has been scrolled vertically

Examples

More Examples

Example

Scroll the contents of a <div> element TO 50 pixels horizontally and 10 pixels vertically:

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
Try it Yourself »

Example

Scroll the contents of a <div> element BY 50 pixels horizontally and 10 pixels vertically:

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
Try it Yourself »

Example

Scroll the contents of <body> by 30 pixels horizontally and 10 pixels vertically:

var body = document.body; // For Chrome, Safari and Opera
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;
Try it Yourself »

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).

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("myP").className = "test";
    } else {
        document.getElementById("myP").className = "";
    }
}
Try it Yourself »

Example

Slide in an element when the user has scrolled down 350 pixels from the top of the page (add the slideUp class):

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
        document.getElementById("myImg").className = "slideUp";
}
Try it Yourself »

Example

Draw a triangle on scroll:

<!-- Use SVG to draw the triangle (has to be <path>) -->
<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>
Try it Yourself »


< Element Object