Fait défiler la page pour rendre l'élément visible à l'écran
Syntaxe element.scrollIntoView([conf])
Compatible tous navigateurs
Oui
Oui
Oui
Oui
Oui
Oui
Oui
Description Fait défiler la page pour rendre l'élément visible dans la page sur l'écran du navigateur.
Il existe des paramètres disponibles à la méthode mais ils ne sont pas encore compatibles avec tous les navigateurs. Dans le cas d'un navigateur incompatible avec les paramètres (comme Safari et Internet Explorer), ils seront ignorés.
Le paramètre facultatif conf est un objet comportant 3 propriétés : block détermine quelle partie de l'élément il faut afficher : "start" (par défaut), "center", "end" ou "nearest" behavior détermine la manière de défiler "auto" (par défaut) ou "smooth" (doux) inline détermine le comportement du scroll en mode horizontal (voir les valeurs de block)
Exemple 1 : Utilisation du scrollIntoView
Code source
<div class="btn btn-sm radius cursor-pointer color-white radius background-color-green" onclick="viewFooter()">Cliquez pour voir le pied de page</div>
<script type="text/javascript"> function viewFooter() { document.querySelector("div.tjs__footer").scrollIntoView({ block: "end", behavior: "smooth" });
}
</script>
Résultat
Cliquez pour voir le pied de page
Emulation de la console
Explication
Cliquez sur le bouton pour défiler vers le pied de page.
SELECT *, DATE_FORMAT(dt_insert, '%d/%m/%Y %H:%i' ) AS jour_insert, DATE_FORMAT(dt_maj, '%d/%m/%Y %H:%i' ) AS jour_maj FROM js_reference ORDER BY IDfather, name
SELECT * FROM js_navigateur ORDER BY ordre
SELECT * FROM js_version ORDER BY ID
SELECT * FROM js_reference WHERE phpfile="htmlelement.scrollintoview"
UPDATE js_reference SET nb_visi=nb_visi+1, nb_visi_delai=nb_visi_delai+1 WHERE ID='405'
SELECT * FROM js_navigateur ORDER BY ordre
SELECT js_equivalent_ressource.*, js_equivalent_language.language, js_equivalent_language.favico
FROM js_equivalent_ressource, js_equivalent_language
WHERE js_equivalent_ressource.idLanguage = js_equivalent_language.id
AND js_equivalent_ressource.etat=1
AND js_equivalent_language.etat=1
AND js_equivalent_ressource.typeof='REF'
AND js_equivalent_ressource.idRessource="405"
SELECT * FROM js_exemple WHERE ID='405' ORDER BY ordre
SELECT * FROM js_url WHERE ID='405' ORDER BY ordre
SELECT * FROM js_url WHERE ID='269' ORDER BY ordre
En savoir plus
