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.
JavaScript Scroll to Top of Div
- Use the scrollIntoView() Method to Scroll to Top of Div in JavaScript
- Use the scrollTo() Method to Scroll to Top of Div in JavaScript
In JavaScript, for internal linking and scrolling through the webpage, we can have multiple ways to follow. We can even set the href of the anchor tag direct to an id and scroll up to that section.
But for a dynamic drive, we will switch to the JavaScript way of performing the task.
In the following section, we will demonstrate the scrollIntoView() and scrollTo() methods. Both methods have similar functionality, but scrollIntoView() can work without any parameter, and scrollTo() might need some specified points.
Use the scrollIntoView() Method to Scroll to Top of Div in JavaScript
Technically, the method requires nothing other than the declaration of the method. We will first initiate an instance for the top div element and then use the scrollIntoView() assisted.
Consequently, an event of linking will specifically take the view to that top portion. The following code lines explain in detail.
html> head> meta charset="utf-8"> meta name="viewport" content="width=device-width"> title>JS Bintitle> style> #top height:200px; background:pink; > #buff height:800px; > style> head> body> div id="top">div> div id="buff">div> a href="javascript: scroll()">Jump to top of pagea> script> function scroll() var top = document.getElementById("top").scrollIntoView(: 'smooth'>, true); > script> body> html> Use the scrollTo() Method to Scroll to Top of Div in JavaScript
The scrollTo() method takes parameters to reset the viewport measurements. Usually, the current state of the viewport will have its position on the x-axis and y-axis.
Later, to reach the top segment, we will reset the current positions, and thus we will be at the top of the div .
html> head> meta charset="utf-8"> meta name="viewport" content="width=device-width"> title>JS Bintitle> style> #top height:200px; background:orange; > #buff height:800px; > style> head> body> div id="top">div> div id="buff">div> a href="javascript: scroll()">Jump to top of pagea> script> function scroll() var top = document.getElementById("top") window.scrollTo(0,0); > script> body> html> Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.
JavaScript — scroll to top of element
sienko
In this article, we would like to show you how to scroll to the top of an element using JavaScript.
var element = document.querySelector('#element'); element.scrollTop = 0;Note:
Go to this article if you’re looking for a solution that works in both modern and older browsers.
1. Using scrollTop property
In this example, we set scrollTop property to 0 to scroll to the top of the element on the button click event.
// ONLINE-RUNNER:browser; Scroll this text to bottom and click the button Line 1 Line 2 Line 3 Line 4 Line 5 Line 6 Line 7 Line 8 Line 9 Line 10 var element = document.querySelector('#element'); function scrollToTop() 2. Using scroll() / scrollTo() method
In this example, we use scroll() / scrollTo() methods to scroll to the top of the element on button click event.
Note:
The scroll() / scrollTo() methods appeared in major web browsers around 2015-2020.
// ONLINE-RUNNER:browser; Scroll this text to bottom and click the button Line 1 Line 2 Line 3 Line 4 Line 5 Line 6 Line 7 Line 8 Line 9 Line 10 3. Smooth scroll behavior
In this example, we use scroll() / scrollTo() methods with smooth behavior to scroll to the top of the element on button click event.
Note:
The scroll() / scrollTo() methods appeared in major web browsers around 2015-2020.
// ONLINE-RUNNER:browser; Scroll this text to bottom and click the button Line 1 Line 2 Line 3 Line 4 Line 5 Line 6 Line 7 Line 8 Line 9 Line 10