Html scroll element to top

HTML DOM Element scrollIntoView

Scroll the element with into the visible area of the browser window:

Description

The scrollIntoView() method scrolls an element into the visible area of the browser window.

Syntax

Parameters

true — the top of the element will be aligned to the top of the visible area of the scrollable ancestor

false — the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.

If omitted, it will scroll to the top of the element.

Return Value

More Examples

Example

Scroll to the top or to the bottom of an element:

const element = document.getElementById(«content»);

function scrollToTop() element.scrollIntoView(true);
>

function scrollToBottom() element.scrollIntoView(false);
>

Browser Support

element.scrollIntoView() is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Element: scrollTop property

The Element.scrollTop property gets or sets the number of pixels that an element’s content is scrolled vertically.

An element’s scrollTop value is a measurement of the distance from the element’s top to its topmost visible content. When an element’s content does not generate a vertical scrollbar, then its scrollTop value is 0 .

scrollTop can be set to any integer value, with certain caveats:

• If the element can’t be scrolled (e.g. it has no overflow or if the element has a property of «non-scrollable«), scrollTop is 0 .
• scrollTop doesn’t respond to negative values; instead, it sets itself back to 0 .
• If set to a value greater than the maximum available for the element, scrollTop settles itself to the maximum value.

When scrollTop is used on the root element (the element), the scrollY of the window is returned. This is a special case of scrollTop .

Warning: On systems using display scaling, scrollTop may give you a decimal value.

Value

Examples

Scrolling an element

In this example, try scrolling the inner container with the dashed border, and see how the value of scrollTop changes.

HTML

div id="container"> div id="scroller"> p> Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea. p> div> div> div id="output">scrollTop: 0div> 

CSS

#scroller  overflow: scroll; height: 150px; width: 150px; border: 5px dashed orange; > #output  padding: 1rem 0; > 

JavaScript

const scroller = document.querySelector("#scroller"); const output = document.querySelector("#output"); scroller.addEventListener("scroll", (event) =>  output.textContent = `scrollTop: $scroller.scrollTop>`; >); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML DOM Element scrollTop

Get the number of pixels the content of «myDIV» is scrolled:

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

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

Description

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

See Also:

Syntax

Return the scrollTop property:

Set the scrollTop property:

Property Values

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

Return Value

More Examples

Example

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

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»;
>
>

Browser Support

element.scrollTop is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Источник