Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1071436 of Window.scrollY

  • Revision slug: Web/API/Window/scrollY
  • Revision title: Window.scrollY
  • Revision id: 1071436
  • Created:
  • Creator: jpmedley
  • Is current revision? No
  • Comment Update compatibility table.

Revision Content

{{APIRef}}

Summary

Returns the number of pixels that the document has already been scrolled vertically.

Syntax

var y = window.scrollY;
  • y is the number of pixels that the document is currently scrolled from the top.

Example

// make sure and go down to the second page 
if (window.scrollY) {
  window.scroll(0, 0);  // reset the scroll position to the top left of the document.
}

window.scrollByPages(1);

Notes

Use this property to check that the document hasn't already been scrolled some if you are using relative scroll functions such as {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, or {{domxref("window.scrollByPages")}}.

The pageYOffset property is an alias for the scrollY property:

window.pageYOffset == window.scrollY; // always true

For cross-browser compatibility, use window.pageYOffset instead of window.scrollY. Additionally, older versions of Internet Explorer (< 9) do not support either property and must be worked around by checking other non-standard properties. A fully compatible example:

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

Specification

Specification Status Comment
{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }} {{ Spec2('CSSOM View') }}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} Edge {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}

See also

  • {{domxref("window.scrollX")}}

Revision Source

<div>{{APIRef}}</div>

<h2 id="Summary" name="Summary">Summary</h2>

<p>Returns the number of pixels that the document has already been scrolled vertically.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox">
var y = window.scrollY;</pre>

<ul>
 <li><code>y</code> is the number of pixels that the document is currently scrolled from the top.</li>
</ul>

<h2 id="Example" name="Example">Example</h2>

<pre class="brush:js">
// make sure and go down to the second page 
if (window.scrollY) {
  window.scroll(0, 0);  // reset the scroll position to the top left of the document.
}

window.scrollByPages(1);</pre>

<h2 id="Notes" name="Notes">Notes</h2>

<p>Use this property to check that the document hasn't already been scrolled some if you are using relative scroll functions such as {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, or {{domxref("window.scrollByPages")}}.</p>

<p>The <code>pageYOffset</code> property is an alias for the <code>scrollY</code> property:</p>

<pre>
window.pageYOffset == window.scrollY; // always true</pre>

<p>For cross-browser compatibility, use <code>window.pageYOffset</code> instead of <code>window.scrollY</code>. <strong>Additionally</strong>, older versions of Internet Explorer (&lt; 9) do not support either property and must be worked around by checking other non-standard properties. A fully compatible example:</p>

<pre class="brush:js">
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
</pre>

<h2 id="Specification" name="Specification">Specification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td>
   <td>{{ Spec2('CSSOM View') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>Edge</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile" style="line-height: 19.0909080505371px;">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">See also</h2>

<ul>
 <li>{{domxref("window.scrollX")}}</li>
</ul>
Revert to this revision