1 files changed, 86 insertions, 0 deletions
diff --git a/files/fr/web/api/element/scrollintoview/index.html b/files/fr/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..bdf1b8d8e5
--- /dev/null
+++ b/files/fr/web/api/element/scrollintoview/index.html
@@ -0,0 +1,86 @@
+---
+title: element.scrollIntoView
+slug: Web/API/Element/scrollIntoView
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <code><strong>Element.scrollIntoView()</strong></code> fait défiler la page de manière à rendre l'élément visible.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">element.scrollIntoView();
+element.scrollIntoView(<var>alignToTop</var>); // Paramètre booléen
+element.scrollIntoView(<var>scrollIntoViewOptions</var>); // Paramètre d'objet
+</pre>
+
+<dl>
+ <dt>
+ <h3 id="Paramètres">Paramètres</h3>
+ </dt>
+ <dt><code>alignToTop</code> {{ optional_inline() }}</dt>
+ <dd>
+ <p>est une valeur {{jsxref("Boolean")}} optionnelle qui :</p>
+
+ <ul>
+  <li>si elle vaut <code>true</code> (<em>vrai</em>), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. C'est la valeur par défaut.</li>
+  <li>Si elle vaut <code>false</code> (<em>faux</em>), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Est un objet qui a les propriétés suivantes :</dd>
+ <dt><code>behavior</code> {{optional_inline}}</dt>
+ <dd>Définit l'animation de transition qui peut être <code>"auto"</code>, <code>"instant"</code> ou <code>"smooth"</code>. Par défaut : <code>"auto"</code>.</dd>
+ <dt><code>block</code> {{optional_inline}}</dt>
+ <dd>L'une des options  <code>"start"</code>, <code>"center"</code>, <code>"end"</code> ou<code>"nearest"</code>. Par défaut : <code>"center"</code>.</dd>
+ <dt><code>inline</code> {{optional_inline}}</dt>
+ <dd>L'une des options <code>"start"</code>, <code>"center"</code>, <code>"end"</code> ou <code>"nearest"</code>. Par défaut : <code>"nearest"</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.scrollIntoView")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li>
+</ul>