Fixes #2431 (#2452)

* Revamp window.location

* Revamp location.reload

2 files changed, 176 insertions, 227 deletions

diff --git a/files/fr/web/api/location/reload/index.html b/files/fr/web/api/location/reload/index.html
index c825101853..891a307902 100644
--- a/files/fr/web/api/location/reload/index.html
+++ b/files/fr/web/api/location/reload/index.html
@@ -1,61 +1,42 @@
 ---
-title: Location.reload()
+title: 'Location : reload()'
 slug: Web/API/Location/reload
-tags:
-  - API
-  - JavaScript
-  - Location
-  - Méthode
-  - Reference
 translation_of: Web/API/Location/reload
+browser-compat: api.Location.reload
 ---
 <div>{{ APIRef("HTML DOM") }}</div>
 
-<p><span class="seoSummary">La méthode <code><strong>Location.reload()</strong></code> recharge la ressource depuis l'URL actuelle.</span></p>
+<p>La méthode <code><strong>location.reload()</strong></code> recharge l'URL courante, à la façon du bouton «&nbsp;Actualiser&nbsp;».</p>
 
-<p>Si l'action est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type <code>SECURITY_ERROR</code> est lancée. Cela se produit si l'origine du script appelant est différente de l'origine de la page initialement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine. Voir la page <a href="/fr/docs/Web/Security/Same_origin_policy_for_JavaScript">Same-origin policy</a> pour plus d'informations.</p>
+<p>Le rechargement peut être bloqué avec une exception <a href="/fr/docs/Web/API/DOMException"><code>DOMException</code></a>  <code>SECURITY_ERROR</code>. Cela se produit si <a href="/fr/docs/Glossary/Origin">l'origine</a> du script qui invoque <code>location.reload()</code> est différente de l'origine de la page qui possède l'objet <a href="/fr/docs/Web/API/Location"><code>Location</code></a>. Voir <a href="/fr/docs/Web/Security/Same-origin_policy">les règles sur l'origine</a> pour plus d'informations.</p>
 
-<h2 id="Syntaxe">Syntaxe</h2>
+<h2 id="syntaxe">Syntaxe</h2>
 
-<pre class="syntaxbox notranslate"><em>object</em>.reload();
+<pre class="brush: js">
+location.reload();
 </pre>
 
-<h2 id="Exemples">Exemples</h2>
+<h2 id="location.reload_n_a_pas_de_paramètre">location.reload() n'a pas de paramètre</h2>
 
-<pre class="brush: js notranslate">// Recharge la page actuelle
-document.location.reload();</pre>
+<p>Firefox prend en charge un paramètre booléen non-standard <a href="https://searchfox.org/mozilla-central/source/dom/base/Location.cpp#551"><code>forceGet</code></a> pour la méthode <code>location.reload()</code>, qui permet à Firefox de passer outre le cache et d'effectuer un rafraîchissement forcé du document. Toutefois, pour tous les autres navigateurs, tout argument utilisé en appelant <code>location.reload()</code> sera ignoré et n'aura aucun effet.</p>
 
-<h2 id="Spécifications">Spécifications</h2>
+<p>Il est toutefois possible que vous rencontriez des occurrences de <code>location.reload(true)</code> dans du code existant basé sur l'hypothèse que ce rafraîchissement forcé aurait lieu dans tous les navigateurs. Une recherche GitHub "<code>location.reload(true)</code>" renvoie <a href="https://github.com/search?q=%22location.reload%28true%29%22&type=code">plusieurs centaines de milliers de résultats</a>.</p>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+<p>Historiquement, une version de Netscape Navigator a introduit la prise en charge de cet argument et cela s'est retrouvé dans Firefox. À un moment, le groupe de travail du W3C sur les API Web <a href="https://www.w3.org/2005/06/tracker/webapi/issues/69">a ouvert le sujet</a> pour étudier son ajout à la spécification pour <code>location.reload()</code>. Toutefois, il n'a jamais été ajouté formellement.</p>
 
-<h2 id="Compatibilité">Compatibilité</h2>
+<p>En résumé, ce paramètre booléen ne fait pas partie de la spécification actuelle <code>location.reload()</code> et n'en a en fait jamais fait partie.</p>
 
+<h2 id="spécifications">Spécifications</h2>
 
+<p>{{Specifications}}</p>
 
-<p>{{Compat("api.Location.reload")}}</p>
+<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<p>{{Compat}}</p>
+
+<h2 id="voir_aussi">Voir aussi</h2>
 
 <ul>
- <li>L'interface {{domxref("Location")}} à laquelle appartient cette méthode.</li>
- <li>Méthodes similaires : {{domxref("Location.assign()")}} et {{domxref("Location.replace()")}}.</li>
+  <li>L'interface <a href="/fr/docs/Web/API/Location"><code>Location</code></a> à laquelle appartient cette méthode.</li>
+  <li>Des méthodes semblables&nbsp;: <a href="/fr/docs/Web/API/Location/assign"><code>Location.assign()</code></a> et <a href="/fr/docs/Web/API/Location/replace"><code>Location.replace()</code></a>.</li>
 </ul>
diff --git a/files/fr/web/api/window/location/index.html b/files/fr/web/api/window/location/index.html
index 91686951bc..f8074f97f9 100644
--- a/files/fr/web/api/window/location/index.html
+++ b/files/fr/web/api/window/location/index.html
@@ -1,229 +1,197 @@
 ---
-title: window.location
-slug: Web/API/window/location
-tags:
-  - DOM
-  - DOM_0
+title: Window.location
+slug: Web/API/Window/location
 translation_of: Web/API/Window/location
+browser-compat: api.Window.location
 ---
-<p>Renvoie un objet <code>Location</code> contenant des informations concernant l'URL actuelle du document et fournit des méthodes pour modifier cette URL. Cette propriété peut être utilisée pour charger une autre page.</p>
+<p>{{APIRef}}</p>
 
-<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+<p>La propriété en lecture seule <strong><code>Window.location</code></strong> renvoie un objet <a href="/fr/docs/Web/API/Location"><code>Location</code></a> qui contient des informations à propos de l'emplacement courant du document.</p>
 
-<pre class="syntaxbox">  var adresseActuelle = window.location;
-  window.location = nouvelleAdresse;</pre>
+<p>Bien que <code>Window.location</code> soit un objet <code>Location</code> en <em>lecture seule</em>, on peut lui affecter une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>. Cela signifie qu'on peut, la plupart du temps, manipuler <code>location</code> comme une chaîne de caractères&nbsp;: <code>location = 'http://www.example.com'</code> est par exemple synonyme de <code>location.href = 'http://www.example.com'</code>.</p>
 
-<p>où</p>
+<p>Voir la page de l'interface <a href="/fr/docs/Web/API/Location"><code>Location</code></a> pour connaître l'ensemble des propriétés disponibles.</p>
 
-<ul>
- <li><em>adresseActuelle</em> est un objet de type <code>Location</code>, fournissant des informations à propos de l'URL courante et des méthodes pour la modifier. Ses propriétés et méthodes sont décrites ci-dessous.</li>
- <li><em>nouvelleAdresse</em> est un objet <code>Location</code> ou une chaîne de caractères indiquant l'URL à charger.</li>
-</ul>
+<h2 id="syntaxe">Syntaxe</h2>
 
-<h2 id="L.27objet_Location" name="L.27objet_Location">L'objet <code>Location</code></h2>
+<pre class="brush: js">
+var <var>oldLocation</var> = location;
+location = <var>newLocation</var>;
+</pre>
 
-<p>Les objets <code>Location</code> ont une méthode <code>toString</code> renvoyant l'URL courante. Il est également possible d'assigner une chaîne à <code>window.location</code>. Cela signifie que <code>window.location</code> peut être utilisé comme s'il s'agissait d'une chaîne dans la plupart des cas. De temps en temps, par exemple pour appeler une méthode d'objet <a href="/fr/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core/Objets_globaux/String" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/String">String</a>, il est nécessaire d'appeler explicitement <code>toString</code> :</p>
+<h2 id="exemples">Exemples</h2>
 
-<pre class="brush: js">alert(window.location.toString().charAt(17))
+<h3 id="exemple_simple">Exemple simple</h3>
+
+<pre class="brush: js">
+console.log(location); // affiche "https://developer.mozilla.org/fr/docs/Web/API/Window/location" dans la console
 </pre>
 
-<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>
-
-<p>Toutes les propriétés suivantes sont des chaînes de caractères. Elles peuvent être lues pour obtenir des informations concernant l'URL courante, ou modifiées pour accéder à une autre adresse URL.</p>
-
-<p>La colonne « Exemple » contient les valeurs de ces propriétés pour l'URL suivante :<span class="nowiki"> http://www.example.com:8080/search?q=devmo#test</span></p>
-
-<table class="fullwidth-table">
- <tbody>
-  <tr>
-   <th>Propriété</th>
-   <th>Description</th>
-   <th>Exemple</th>
-  </tr>
-  <tr>
-   <td><a name="hash"><code>hash</code></a></td>
-   <td>La partie de l'URL qui suit le symbole « # », s'il y en un, avec ce symbole inclus. Une chaîne de caractères vide s'il n'y a pas de symbole #, ou qu'il n'est suivi par rien. Vous pouvez écouter l'<a href="/en-US/docs/Web/Reference/Events/hashchange" title="/en-US/docs/Web/Reference/Events/hashchange">évènement hashchange</a> pour être alerté des changements du hash dans les navigateurs le supportant.</td>
-   <td>#test</td>
-  </tr>
-  <tr>
-   <td><a name="host"><code>host</code></a></td>
-   <td>Le nom de l'hôte et son numéro de port.</td>
-   <td>www.<span class="nowiki">example</span>.com:8080</td>
-  </tr>
-  <tr>
-   <td><a name="hostname"><code>hostname</code></a></td>
-   <td>Le nom de l'hôte (sans son numéro de port).</td>
-   <td>www.<span class="nowiki">example</span>.com</td>
-  </tr>
-  <tr>
-   <td><a name="href"><code>href</code></a></td>
-   <td>L'URL entière.</td>
-   <td><span class="nowiki">http://www.</span><span class="nowiki">example</span><span class="nowiki">.com:8080/search?q=devmo#test</span></td>
-  </tr>
-  <tr>
-   <td><a name="origin"><code>origin</code></a></td>
-   <td>L'origine de l'URL</td>
-   <td><span class="nowiki">http://www.</span><span class="nowiki">example</span><span class="nowiki">.com:8080</span></td>
-  </tr>
-  <tr>
-   <td><a name="pathname"><code>pathname</code></a></td>
-   <td>Le chemin (relativement à l'hôte).</td>
-   <td>/search</td>
-  </tr>
-  <tr>
-   <td><a name="port"><code>port</code></a></td>
-   <td>Le numéro de port de l'URL. Si l'URL n'a pas de port (si le site utilise le port 80, le port par défaut de la plupart des sites), une chaîne de caractères vide est renvoyée.</td>
-   <td>8080</td>
-  </tr>
-  <tr>
-   <td><a name="protocol"><code>protocol</code></a></td>
-   <td>Le protocole de l'URL.</td>
-   <td>http:</td>
-  </tr>
-  <tr>
-   <td><a name="search"><code>search</code></a></td>
-   <td>La partie de l'URL qui suit le symbole « <code>?</code> », avec ce symbole inclus</td>
-   <td>?q=devmo</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
-
-<table class="fullwidth-table">
- <tbody>
-  <tr>
-   <th>Méthode</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td><code>assign(<em>url</em>)</code></td>
-   <td>Charge le document situé à l'URL spécifiée.</td>
-  </tr>
-  <tr>
-   <td><code>reload(<em>forceget</em>)</code></td>
-   <td>Recharge le document depuis l'URL actuelle. <code>forceget</code> est une valeur booléenne, qui lorsqu'elle vaut <code>true</code> force la page à être rechargée depuis le serveur. Si elle vaut <code>false</code> ou n'est pas précisée, le navigateur peut recharger la page depuis son cache.</td>
-  </tr>
-  <tr>
-   <td><code>replace(<em>url</em>)</code></td>
-   <td>Remplace le document courant par celui situé à l'URL fournie. La différence avec la méthode <code>assign()</code> est qu'après un <code>replace()</code>, la page courante ne sera pas enregistrée dans l'historique de la session, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton « Page précédente » pour y retourner.</td>
-  </tr>
-  <tr>
-   <td><code>toString()</code></td>
-   <td>Renvoie la représentation sous forme de chaîne de l'URL de l'objet <code>Location</code>. Consultez la <a href="/fr/docs/JavaScript/Référence_JavaScript/Référence_JavaScript/Objets_globaux/Object/toString" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString">référence JavaScript</a> pour plus de détails.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple" name="Exemple">Exemples</h2>
-
-<h3 id="Exemple_1_Naviguer_vers_une_nouvelle_page">Exemple 1 : Naviguer vers une nouvelle page</h3>
-
-<p>A chaque fois qu'une nouvelle valeur est assignée à l'objet <code>Location</code>, un document sera chargé en utilisant l'URL fournie, comme si <code>window.location.assign() </code>avait été appelé avec la nouvelle URL.</p>
-
-<pre class="brush: js">window.location.assign("http://www.mozilla.org"); // ou
-window.location = "http://www.mozilla.org";
+<h3 id="premier_exemple_naviguer_sur_une_nouvelle_page">Premier exemple : naviguer sur une nouvelle page</h3>
+
+<p>Lorsqu'une nouvelle valeur est affectée à l'objet <code>location</code>, un document sera chargé en utilisant l'URL comme si <code>location.assign()</code> avait été invoquée avec l'URL modifiée.</p>
+
+<div class="notecard note">
+  <p><strong>Note :</strong> <a
+    href="https://html.spec.whatwg.org/multipage/browsers.html#allowed-to-navigate">Les marqueurs de bac à sable relatifs à la navigation</a> pourront lever une exception et empêcher la navigation.</p>
+</div>
+
+<pre class="brush: js">
+location.assign("http://www.mozilla.org"); // ou
+location = "http://www.mozilla.org";
 </pre>
 
-<h3 id="Exemple_2_Forcer_le_rechargement_de_la_page_actuelle_depuis_le_serveur">Exemple 2 :  Forcer le rechargement de la page actuelle depuis le serveur</h3>
+<h3 id="deuxième_exemple_recharger_la_page_courante">Deuxième exemple : recharger la page courante</h3>
 
-<pre class="brush: js">window.location.reload(true);</pre>
+<pre class="brush: js">location.reload();</pre>
 
-<h3 id="Exemple_3_Afficher_les_propriétés_de_l'URL_actuelle_dans_une_fenêtre_d'alerte">Exemple 3 : Afficher les propriétés de l'URL actuelle dans une fenêtre d'alerte</h3>
+<h3 id="troisième_exemple">Troisième exemple</h3>
 
-<pre class="brush: js">function montrerLoc() {
-  var oLocation = window.location, aLog = ["Propriété (Typeof): valeur", "window.location (" + (typeof oLocation) + "): " + oLocation ];
-  for (var sProp in oLocation){
-    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
-  }
-  alert(aLog.join("\n"));
-}
+<p>Dans cet exemple, on recharge la page avec la méthode <a href="/fr/docs/Web/API/Location/replace"><code>replace()</code></a> afin d'insérer la valeur de <code>location.pathname</code> dans l'ancre :</p>
 
-// dans le HTM: &lt;button onclick="montrerLoc();"&gt;Montrer les propriétés de Location&lt;/button&gt;
+<pre class="brush: js">
+function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
 </pre>
 
-<h3 id="Exemple_4_Envoyer_une_chaine_de_données_au_serveur_en_modifiant_la_propriété_search">Exemple 4 : Envoyer une chaine de données au serveur en modifiant la propriété <code>search</code></h3>
+<h3 id="quatrième_exemple_afficher_les_propriétés_de_l_url_courante">Quatrième exemple : afficher les propriétés de l'URL courante</h3>
 
-<pre class="brush: js">function envoyerDonnees (sData) {
-  window.location.search = sData;
+<pre class="brush: js">
+function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+  aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " + (oLocation[sProp] || "n/a"));
+  }
+  console.log(aLog.join("\n"));
 }
-
-// dans le HTML : &lt;button onclick="envoyerDonnees('des infos');"&gt;Envoyer des données&lt;/button&gt;
 </pre>
 
-<p>L'adresse URL complêtée par "?des%20infos" est envoyée au serveur (si aucune action est prise en charge par le serveur, le document actuel est rechargé avec la nouvelle chaîne de caractère modifié).</p>
-
-<h3 id="Exemple_5_Obtenir_la_valeur_d'un_paramètre_de_l'URL_par_window.location.search">Exemple 5 : Obtenir la valeur d'un paramètre de l'URL par <code>window.location.search</code></h3>
+<h3 id="cinquième_exemple_envoyer_une_chaîne_de_données_au_serveur_en_modifiant_la_propriété_search">Cinquième exemple : envoyer une chaîne de données au serveur en modifiant la propriété search</h3>
 
-<pre class="brush: js">function obtenirParametre (sVar) {
-  return unescape(window.location.search.replace(new RegExp("^(?:.*[&amp;\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&amp;") + "(?:\\=([^&amp;]*))?)?.*$", "i"), "$1"));
+<pre class="brush: js">
+function sendData (sData) {
+  location.search = sData;
 }
 
-alert(obtenirParametre("nom"));
+// Dans le HTML: &lt;button onclick="sendData('Des données');"&gt;Envoyer des données&lt;/button&gt;
 </pre>
 
-<h3 id="Exemple_6_Placer_les_valeurs_obtenues_par_window.location.search_dans_un_objet_nommé_oParametres">Exemple 6 : Placer les valeurs obtenues par <code>window.location.search</code> dans un objet nommé <code>oParametres</code></h3>
+<p>On ajoutera "?Des%20données" à l'URL courante qui sera alors envoyée au serveur. Si aucune action n'est entreprise par le serveur, le document courant est rechargé avec la chaîne de recherche modifiée.</p>
 
-<pre class="brush: js">var oParametre = {};
+<h3 id="sixième_exemple_utiliser_les_marques-pages_sans_changer_la_propriété_hash">Sixième exemple : utiliser les marques-pages sans changer la propriété <code>hash</code></h3>
+
+<pre class="brush: html">
+&lt;!doctype html&gt;
+  &lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"/&gt;
+    &lt;title&gt;Exemple MDN&lt;/title&gt;
+    &lt;script&gt;
+function showNode (oNode) {
+  document.documentElement.scrollTop = oNode.offsetTop;
+  document.documentElement.scrollLeft = oNode.offsetLeft;
+}
 
-if (window.location.search.length &gt; 1) {
-  for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&amp;"); nKeyId &lt; aCouples.length; nKeyId++) {
-    aItKey = aCouples[nKeyId].split("=");
-    oParametre[unescape(aItKey[0])] = aItKey.length &gt; 1 ? unescape(aItKey[1]) : "";
-  }
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
 }
+    &lt;/script&gt;
+    &lt;style&gt;
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+    &lt;/style&gt;
+  &lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+  &lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.&lt;/p&gt;
+  &lt;p id="myBookmark1"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark2');"&gt;Aller au marque-page n°2&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+  &lt;p&gt;Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.&lt;/p&gt;
+  &lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+  &lt;p&gt;Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
+  &lt;p&gt;Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.&lt;/p&gt;
+  &lt;p&gt;Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.&lt;/p&gt;
+  &lt;p&gt;Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.&lt;/p&gt;
+  &lt;p id="myBookmark2"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark1');"&gt;Aller au marque-page n°1&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark1', false);"&gt;Aller au marque-page n°1 sans utiliser location.hash&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark3');"&gt;Aller au marque-page n°3&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+  &lt;p&gt;Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.&lt;/p&gt;
+  &lt;p&gt;Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.&lt;/p&gt;
+  &lt;p id="myBookmark3"&gt;&lt;em&gt;Voici le marque-page n°3&lt;/em&gt;&lt;/p&gt;
+  &lt;p&gt;Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.&lt;/p&gt;
+  &lt;p&gt;Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.&lt;/p&gt;
+  &lt;p&gt;Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.&lt;/p&gt;
+  &lt;p&gt;Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.&lt;/p&gt;
+  &lt;p&gt;Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.&lt;/p&gt;
+  &lt;p&gt;Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.&lt;/p&gt;
+  &lt;p&gt;Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.&lt;/p&gt;
+  &lt;p&gt;Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.&lt;/p&gt;
+  &lt;p&gt;Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.&lt;/p&gt;
+  &lt;p&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
 
-// alert(oParametre.votreValeur);
+<p>La même chose mais avec un défilement animé :</p>
+
+<pre class="brush: js">
+var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+   /*
+   * nDuration: la durée, exprimée en millisecondes, pour chaque frame
+   * nFrames: le nombre de frames pour chaque défilement
+   */
+   nDuration = 200, nFrames = 10;
+
+  function _next () {
+  if (_itFrame &gt; nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+  _isBot = true;
+  document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+  document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+  if (_useHash &amp;&amp; _itFrame === nFrames) { location.hash = _bookMark; }
+  _itFrame++;
+  }
+
+  function _chkOwner () {
+  if (_isBot) { _isBot = false; return; }
+  if (_scrollId &gt; -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    var oNode = document.querySelector(sBookmark);
+  _scrollY = document.documentElement.scrollTop;
+  _scrollX = document.documentElement.scrollLeft;
+  _bookMark = sBookmark;
+  _useHash = bUseHash === true;
+  _nodeX = oNode.offsetLeft;
+    _nodeY = oNode.offsetTop;
+    _itFrame = 1;
+  if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
 </pre>
 
-<p>… la même chose avec un constructeur anonyme :</p>
+<h2 id="spécifications">Spécifications</h2>
 
-<pre class="brush: js">var oParametre = new (function (sRecherche) {
-  if (sRecherche.length &gt; 1) {
-    for (var aItKey, nKeyId = 0, aCouples = sRecherche.substr(1).split("&amp;"); nKeyId &lt; aCouples.length; nKeyId++) {
-      aItKey = aCouples[nKeyId].split("=");
-      this[unescape(aItKey[0])] = aItKey.length &gt; 1 ? unescape(aItKey[1]) : "";
-    }
-  }
-})(window.location.search);
+<p>{{Specifications}}</p>
 
-// alert(oParametre.votreValeur);
-</pre>
+<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat}}</p>
 
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaire</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface",
-        "Window.location")}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>Aucun changement par rapport à {{SpecName("HTML5 W3C")}}.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface",
-        "Window.location")}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Window.location")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
+<h2 id="voir_aussi">Voir aussi</h2>
 
 <ul>
- <li><a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a></li>
- <li>{{domxref('window.history')}}</li>
- <li><a href="/en-US/docs/Web/Reference/Events/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
+  <li>L'interface qui décrit la valeur renvoyée par cette propriété&nbsp;: <a href="/fr/docs/Web/API/Location"><code>Location</code></a>.</li>
+  <li>Une information similaire, mais attachée au document courant&nbsp;: <a href="/fr/docs/Web/API/Document/location"><code>Document.location</code></a>.</li>
+  <li><a href="/fr/docs/Web/API/History_API">Manipuler l'historique du navigateur avec l'API History</a></li>
+  <li><a href="/fr/docs/Web/API/Window/hashchange_event"><code>hashchange</code></a></li>
 </ul>