Revision 928731 of Element.scrollIntoView()

<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div>

<p>The <code><strong>Element.scrollIntoView()</strong></code> method scrolls the current element into the visible area of the browser window.</p>

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

<pre class="syntaxbox">
element.scrollIntoView(); // Equivalent to<code> element.scrollIntoView(true)
</code>element.scrollIntoView(<em>alignToTop</em>); // Boolean arguments
element.scrollIntoView(<em>scrollIntoViewOptions</em>); // Object argument
</pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><em><code>alignToTop</code></em></dt>
 <dd>Is a {{jsxref("Boolean")}} value:
 <ul>
  <li>If <code>true</code>, the top of the element will be aligned to the top of the visible area of the scrollable ancestor.</li>
  <li>If <code>false</code>, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.</li>
 </ul>
 </dd>
 <dt><em><code>scrollIntoViewOptions</code></em></dt>
 <dd>A boolean or an object with the following options:</dd>
 <dd>
 <pre class="idl">
{
    behavior: <strong>"auto"</strong>  | "instant" | "smooth",
    block:    <strong>"start"</strong> | "end",
}</pre>
 </dd>
 <dd>If it is a boolean, <code>true</code> corresponds to <code>{block: "start"}</code> and <code>false</code> to <code>{block: "end"}</code></dd>
</dl>

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

<pre class="brush: js">
var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({block: "end", behavior: "smooth"});
</pre>

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

<p>The element may not be scrolled completely to the top or bottom depending on the layout of other elements.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
   <td>{{Spec2("CSSOM View")}}</td>
   <td>Initial definition</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>1.0</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>6</td>
   <td>10.0</td>
   <td>4</td>
  </tr>
  <tr>
   <td><code>scrollIntoViewOptions</code></td>
   <td><a href="https://code.google.com/p/chromium/issues/detail?id=243871">{{CompatNo}}</a></td>
   <td>{{CompatGeckoDesktop(36)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(1.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>scrollIntoViewOptions</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile(36)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li>{{non-standard_inline}} <a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"><code>Element.scrollIntoViewIfNeeded()</code></a></li>
</ul>