Document.scrollingElement is a read-only instance property that returns the Element which scrolls the document. Learn standards vs quirks mode, scroll to top with scrollTop, compare with documentElement and body, and five examples with try-it labs.
Read-only property
Element | null
documentElement
scrollTop / scrollLeft
body or null
Baseline widely
When users scroll a long page, something in the DOM holds the scroll position. Before scrollingElement, developers often guessed between document.documentElement and document.body. The standard property tells you which element actually scrolls.
MDN: the scrollingElement read-only property returns a reference to the Element that scrolls the document. In standards mode, this is the root element of the document, document.documentElement.
MDN’s example sets scrollTop = 0 on document.scrollingElement to jump to the top. That works across browsers without hard-coding <html> vs <body>.
Related Document tutorials: documentElement, body, compatMode, defaultView.
Document.scrollingElementA read-only instance property from the CSSOM View Module.
documentElement, MDN).body if it exists and is not potentially scrollable; otherwise null (MDN).scrollTop and scrollLeft on the returned Element.window.scrollTo() for the same visual result.document.scrollingElementThe Element that scrolls the document, usually the root element (unless not in standard mode, MDN).
const scrollElm = document.scrollingElement;
scrollElm.scrollTop = 0;| Goal | Code / note |
|---|---|
| Get scrolling root | document.scrollingElement |
| Scroll to top | document.scrollingElement.scrollTop = 0 |
| Read scroll position | document.scrollingElement.scrollTop |
| Horizontal scroll | document.scrollingElement.scrollLeft |
| Standards mode | Usually same as documentElement (MDN) |
| Alternative API | window.scrollTo(0, 0) |
Four facts about document.scrollingElement.
Element|nullRead-only
documentElementMDN
scrollTopPosition
BaselineSince 2016
scrollingElement vs documentElementscrollingElement | documentElement | |
|---|---|---|
| Purpose | Element that scrolls the document | Root element of the document |
| Standards mode | Same node (MDN) | <html> root |
| Quirks mode | body or null (MDN) | Still <html> |
| Best for scroll position | Yes | Works in standards mode only |
Examples follow MDN Document: scrollingElement. Each includes a try-it lab you can run in the browser.
Read the scrolling root on a modern HTML page.
Log which element scrolls the document in standards mode.
const scrollElm = document.scrollingElement;
console.log(scrollElm.tagName); // "HTML" in standards modeMDN: in standards mode, scrollingElement is the document root (<html>).
Set scrollTop = 0 on the scrolling element.
const scrollElm = document.scrollingElement;
scrollElm.scrollTop = 0;This is MDN’s official example pattern for resetting vertical scroll.
Compare, measure, and wrap scroll logic.
documentElementCheck whether both properties reference the same node.
const same =
document.scrollingElement === document.documentElement;
console.log("Same node in standards mode?", same);On a normal page with <!DOCTYPE html>, both point at <html>.
Read scrollTop to know how far the user has scrolled.
const y = document.scrollingElement.scrollTop;
console.log("Vertical scroll:", y, "px");Use this for sticky headers, scroll-spy navigation, or “back to top” button visibility.
Wrap scroll logic with a null check for edge cases.
function scrollToTop() {
const el = document.scrollingElement;
if (el) {
el.scrollTop = 0;
el.scrollLeft = 0;
}
}
scrollToTop();
console.log("Scrolled to top");MDN notes quirks-mode edge cases where scrollingElement can be null; a guard keeps code safe.
scrollTop = 0 on click.scrollTop to highlight sections.document.scrollingElement WorksStandards mode (CSS1Compat) vs quirks mode (BackCompat).
Returns the Element that owns page scroll (MDN).
Measure position or jump to top, left, or any offset.
No more hard-coding documentElement vs body in modern pages.
document.documentElement (MDN).body or null (MDN) — use <!DOCTYPE html> in new projects.window.scrollY often matches scrollingElement.scrollTop for the main document.Document.scrollingElement is marked Baseline Widely available on MDN (since August 2016). Logos use the shared browser-image-sprite.png sprite from this project.
Read-only Element that scrolls the document — scrollTop, scroll to top, standards vs quirks.
Bottom line: Use document.scrollingElement for reliable page scroll logic. In standards mode it matches documentElement; pair with window.scrollTo when you prefer the Window API.
Document.scrollingElement tells you which Element scrolls the page. In standards mode it is the root <html> element. Use scrollTop and scrollLeft for position, or set scrollTop = 0 to jump to the top as MDN demonstrates.
Continue with styleSheets, documentElement, body, or the JavaScript hub.
document.scrollingElement for page scroll logicif (document.scrollingElement) in edge cases<!DOCTYPE html> so standards mode applieswindow.scrollTo when that API is simplerscrollTop for scroll-spy and progress UIdocument.body for modern pagesscrollingElement is never nulldocument.scrollingElement (read-only)document.scrollingElementThe standard Element that scrolls the document.
Element|null
APIdocumentElement
MDNscrollTop=0
MDNbody|null
EdgeBaseline
2016+MDN notes that in quirks mode, scrollingElement may return document.body or even null. That is why modern pages use <!DOCTYPE html> and standards mode, where scrollingElement === document.documentElement.
Learn how to list and inspect CSS stylesheets linked or embedded in the document.
6 people found this page helpful