The read-only Window
property pageYOffset
is an alias for scrollY
; as such, it returns the number of pixels the document is currently scrolled along the vertical axis (that is, up or down) with a value of 0.0, indicating that the top edge of the Document
is currently aligned with the top edge of the window's content area.
There is slightly better support for pageYOffset
than for scrollY
in older browsers, but if you're not concerned about browsers more than a handful of years old, you can use either one.
The corresponding pageXOffset
property, which returns the number of pixels scrolled along the horizontal axis (left and right), is an alias for scrollX
.
Syntax
yOffset = window.pageYOffset;
Value
A floating-point number specifying the number of pixels the Document
is scrolled vertically within its containing Window
. This number is subpixel precise, so it may not be an integer. A value of 0.0 indicates that the window is not scrolled vertically, and that the top of the document is located at the top edge of the window's content area.
Since this property is an alias for Window.scrollY
, see that article for additional details on this value and its use.
Example
var contentHTML = ` <h2 id="introduction">Introduction</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat vitae felis non dictum. Ut auctor eros tortor, vel elementum arcu rhoncus nec. Donec non laoreet massa. Donec pretium nisi et condimentum convallis. Nullam dictum molestie finibus. Nullam vitae lorem non augue mattis cursus.</p> <p>Maecenas nec tortor tincidunt, sollicitudin mi eget, fermentum turpis. Vestibulum ac ante et libero efficitur faucibus id eget ex. Pellentesque tempor pharetra tincidunt. Suspendisse potenti. Nulla vulputate nunc sit amet hendrerit faucibus. Nullam metus dui, venenatis lacinia nunc nec, vestibulum viverra nunc. Quisque interdum quam tortor, sit amet varius neque consectetur at. Quisque vel turpis justo.</p> <h2 id="overview">Overview</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui dolor, pulvinar sed diam id, eleifend dapibus odio. Duis vitae ante nibh. Integer bibendum imperdiet suscipit. Fusce ligula leo, consectetur ac ante eget, gravida laoreet purus. Cras sodales efficitur risus, sed feugiat sem. Pellentesque justo augue, placerat non leo sit amet, laoreet fringilla arcu.</p> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin in gravida libero. Vivamus placerat, lacus eget condimentum sagittis, enim nunc bibendum nisi, quis varius erat felis sit amet risus.</p> <p>Sed non finibus ligula. Fusce a magna auctor, molestie nibh eget, sodales felis. Donec imperdiet facilisis mi ut aliquam. Etiam sodales suscipit urna, eget hendrerit neque elementum a. Vivamus fringilla sodales est ut ultricies. Nulla convallis congue maximus. Nullam consectetur felis vitae ultricies accumsan. Mauris at aliquam felis. Mauris efficitur tellus massa, id ullamcorper ipsum fermentum eu. Aenean mollis dignissim ultrices. Nunc gravida, sem sit amet lobortis iaculis, dolor ligula convallis nibh, id condimentum metus libero nec odio. Quisque nec ante pretium, viverra neque nec, facilisis risus. Duis condimentum sapien non felis cursus blandit. Integer euismod lectus a ipsum pellentesque lacinia.</p> `; document.getElementById("frame").contentDocument .body.innerHTML = contentHTML;
In this example, an <iframe>
is created and filled with content, then a specific element within the document is scrolled into view in the frame. Once that's done, the vertical scroll position is checked by looking at the value of pageYOffset
in the frame's contentWindow
.
HTML
The HTML is extremely simple and has just two elements: an <iframe>
that contains the document we're going to scroll, and a <div>
into which we'll output the value of pageYOffset
when we've finished the scroll.
<iframe id="frame"> </iframe> <div id="info"> </div>
JavaScript
var frame = document.getElementById("frame"); var frameDoc = frame.contentDocument; var info = document.getElementById("info"); var target = frameDoc.getElementById("overview"); frameDoc.scrollingElement.scrollTop = target.offsetTop; info.innerText = "Y offset after scrolling: " + frame.contentWindow.pageYOffset + " pixels";
The JavaScript code begins by getting into frame
and info
the <iframe>
element that contains our content as well as the <div>
element into which we'll output the result of our scroll position check. It then gets a reference to the element we want to scroll into view calling getElementById()
on the frame's HTMLIFrameElement.contentDocument
.
With the target element in hand, we set the scrollTop
of the frame's scrollingElement
to the offsetTop
of the target element. By doing so, we set the vertical scrolling position of the frame's document so that it's the same as the top edge of the target element.
This will automatically set the scrolling position to the maximum possible value if the attempted scroll would exceed the maximum. This prevents us from falling off the edge of the document. Nobody wants to know what's out there. There might be dragons.
CSS
iframe { width: 620px; height: 450px; border: 1px solid black; } #info { margin-top: 20px; font: 16px "Open Sans", "Helvetica", "Arial"; }
Result
The result follows. Note that the frame's contents have been scrolled to show the section named "Overview", and that the value of the pageYOffset
property is shown with the corresponding value.
Specification
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of 'window.pageYOffset' in that specification. |
Working Draft |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
pageYOffset | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 3 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
See also
pageXOffset
scrollY
andscrollX
scroll()
,scrollBy()
, andscrollTo()