Comment faire défiler vers un élément en utilisant JavaScript

Maintenant, créez un bouton avec un "sur clic"Événement invoquant la fonction"Scrollementment ():

Élément de défilement

Après cela, spécifiez la source d'image et son ID pour être défilé:

Enfin, définissez une fonction nommée «Scrollementment ()«Qui va chercher l'élément requis en utilisant le«document.getElementByid ()”Méthode et appliquez la méthode ScrolLinToView () pour faire défiler l'image:

fonction ScrollerElement ()
var élément = document.getElementById ("div");
élément.défiler dans l'affichage();

Code CSS

Dans le code CSS, appliquez les dimensions suivantes pour ajuster la taille de l'image en se référant à l'ID d'image "div»:

#div
hauteur: 800px;
Largeur: 1200px;
débordement: auto;

La sortie correspondante sera:

Méthode 2: Faites défiler vers un élément de JavaScript à l'aide de la fenêtre.Méthode Scroll ()

Le "fenêtre.faire défiler()»Méthode fait défiler la fenêtre en fonction des valeurs de coordonnées dans le document. Cette méthode peut être implémentée pour récupérer l'ID d'image, définir ses coordonnées à l'aide d'une fonction et faire défiler l'image spécifiée.

Syntaxe

fenêtre.Scroll (x-coord, y-coord)

Dans la syntaxe ci-dessus, "x-coord»Fait référence aux coordonnées x et«y-coord»Indique les coordonnées Y.

L'exemple suivant explique le concept déclaré.

Exemple

Répétez les mêmes étapes pour ajouter l'en-tête, créez un bouton, appliquez l'événement OnClick et spécifiez la source d'image avec son ID:

Cliquez sur le bouton pour faire défiler vers l'élément.

Élément de défilement

Ensuite, définissez une fonction nommée «Scrollementment ()". Ici, nous allons ajuster les coordonnées en utilisant le «fenêtre.faire défiler()«Méthode en accédant à la fonction nommée«Position()«Et l'application sur l'élément d'image récupéré:

fonction ScrollerElement ()
fenêtre.Faites défiler (0, position (document.getElementById ("div")));

Après cela, définissez une fonction nommée «Position()”Prendre un obj variable comme argument. Appliquez également le «comptsent”Propriété, qui accédera à l'ancêtre le plus proche qui n'a pas de position statique et la renvoie. Ensuite, incrément la valeur supérieure actuelle initialisée à l'aide du «décalage»Propriété qui renverra la position supérieure par rapport au parent (offsetParent) et renvoie la valeur de«Haut actuel«Lorsque la condition ajoutée est évaluée comme vraie:

position de fonction (obj)
var currentTop = 0;
si (obj.offsetparent)
faire
currentTop + = obj.OffsetTop;
while ((obj = obj.offsetParent));
return [currentTop];

Enfin, stylisez le conteneur créé en fonction de vos exigences:

#div
Hauteur: 1000px;
Largeur: 1000px;
débordement: auto;

Sortir

Méthode 3: Faites défiler vers un élément de JavaScript à l'aide de la méthode ScrollTO ()

Le "ScrolltO ()»Méthode défile le document spécifié aux coordonnées assignées. Cette méthode peut également être implémentée pour obtenir l'élément en utilisant son ID et en effectuant les fonctionnalités requises pour faire défiler l'image particulière sur le DOM.

Syntaxe

fenêtre.Scrollto (x, y)

Ici, "X" et "y”Poignez les coordonnées X et Y.

Jetez un œil à l'exemple suivant.

Exemple

Tout d'abord, répétez les étapes discutées ci-dessus pour ajouter un en-tête, un bouton avec un événement OnClick et l'image comme suit:

Cliquez sur le bouton pour faire défiler vers l'élément.

Élément de défilement

Ensuite, définissez une fonction nommée «Scrollementment ()»Et définissez la méthode Position () Position () dans la méthode ScrollTO ():

fonction ScrollerElement ()
fenêtre.Scrollto (0, position (document.getElementById ("div")));

Enfin, définissez une fonction nommée position () et appliquez de manière similaire les étapes discutées ci-dessus pour définir les coordonnées de l'image spécifiée:

position de fonction (obj)
var currentTop = 0;
si (obj.offsetparent)
faire
currentTop + = obj.OffsetTop;
while ((obj = obj.offsetParent));
return [currentTop];

Sortir

Nous avons discuté de toutes les méthodes pratiques pour faire défiler un élément en utilisant JavaScript.

Conclusion

Pour faire défiler un élément en JavaScript, utilisez le «défiler dans l'affichage()«Méthode pour accéder à l'élément et appliquer la fonctionnalité spécifiée, la«fenêtre.faire défiler()«Méthode pour récupérer l'élément, définir ses coordonnées à l'aide d'une fonction et faire défiler l'image, ou utiliser le«ScrolltO ()«Méthode afin de récupérer l'élément et de le faire défiler en conséquence. Ce blog a démontré le concept pour faire défiler un élément en utilisant JavaScript.