码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM Element scrollTop

❮ Previous ❮ Element Object Reference Next ❯

Example

Get the number of pixels the content of "myDIV" is scrolled:

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

Scroll the contents of "myDIV" TO 50 pixels horizontally and 10 pixels vertically:

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

Scroll the contents of "myDIV" BY 50 pixels horizontally and 10 pixels vertically:

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

More examples below.

Description

The scrollTop property sets or returns the number of pixels an element's content is scrolled vertically.

See Also:

The scrollLeft Property

The CSS overflow Property

The onscroll Event

Syntax

Return the scrollTop property:

element.scrollTop

Set the scrollTop property:

element.scrollTop = pixels

Property Values

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

If the number is negative, the number is set to 0.
If the element cannot be scrolled, the number is set to 0.
If the number is greater than maximum allowed, the number is set to the maximum.

Return Value

Type Description
Number The number of pixels the element's content is scrolled vertically.

More Examples

Example

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

const html = document.documentElement;
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 »

Browser Support

element.scrollTop is supported in all browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes
❮ Previous ❮ Element Object Reference Next ❯