Retourner à la page d'accueil de TJS

Méthode : HTMLElement.scrollIntoView()

Fait défiler la page pour rendre l'élément visible à l'écran

Syntaxe
element.scrollIntoView([conf])

Compatible tous navigateurs

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.

Page en rapport
Introduction au DHTML
Page mise à jour le

Nouvelle édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 21 octobre

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le 28/11/2020 09:38:19 sur php7 en 24.65 ms