La barre de défilement ou la fonction de défilement détermine la position dans laquelle le défilement a lieu. Une barre de défilement peut se déplacer horizontalement et verticalement. La barre de défilement horizontale nous permet de faire défiler le contenu horizontalement i.e., gauche ou droite. Alors que la barre de défilement verticale nous permet de faire défiler le contenu verticalement.e., haut ou bas.

Maintenant, question, c'est comment permettre le défilement vertical en javascript ou jQuery afin que chaque fois qu'un utilisateur clique sur un bouton, la page défile vers la position la plus haute? Bien! Nous avons quelques approches qui peuvent être utilisées pour accomplir cette tâche.

Ce message expliquera le fonctionnement des approches ci-dessous pour faire défiler la page à la position la plus haute:

• Comment faire défiler une page à la position la plus haute à l'aide de JavaScript?
• Comment faire défiler une page à la position la plus haute à l'aide de jQuery?

Alors, commençons!

Comment faire défiler une page à la position la plus haute à l'aide de JavaScript?

Dans JavaScript, l'interface de la fenêtre fournit une méthode intégrée nommée ScrolltO () qui peut être utilisée pour faire défiler une position particulière sur la page.

Syntaxe

Vous pour suivre la syntaxe ci-dessous afin de travailler avec la méthode ScrollTO ():

L'extrait ci-dessus montre que la fenêtre.La méthode ScrolltO () accepte la coordonnée x et la coordonnée y comme paramètres. Si nous spécifions les deux coordonnées comme «0», alors la méthode ScrollTO () déplacera / fait défiler la page au point supérieur.

Exemple: comment utiliser la fenêtre.ScrolltO () Méthode?

Le programme ci-dessus a effectué les tâches ci-dessous:

• Créé

  et

  Tags pour ajouter des titres et appliqué en ligne CSS pour les styliser.

• Créé quelques paragraphes en utilisant

  élément.

• Créé un bouton nommé «Recrollback vers le haut!".
• Cliquez sur le «Recrollback vers le haut!"Le bouton invoquera la méthode" topfun () ".
• Dans la méthode topfun (), nous avons utilisé la fenêtre.ScrolltO () Méthode.
• Nous définissons les deux coordonnées comme 0, par conséquent, en cliquant sur le «Recrollback vers le haut!”Le bouton fait défiler la page à la position la plus haute.

La sortie a vérifié que cliquer sur le bouton a fait défiler la page à la position la plus haute.

Comment faire défiler une page à la position la plus haute à l'aide de jQuery?

JQuery fournit une méthode nommée «ScrollTop ()» qui est utilisée pour retourner / définir la position de la barre de défilement verticale pour l'élément ciblé. La position 0 représente que la barre de défilement est sur le dessus. Nous devons donc passer «0» comme argument à la méthode «scrolltop ()» afin de faire défiler en haut de la page.

Syntaxe

Suivez la syntaxe donnée ci-dessous pour obtenir la position verticale de la barre de défilement:

Suivez la syntaxe dirigée ci-dessous pour définir la position de la barre de défilement verticale:

Exemple: comment utiliser la méthode ScrollTop ()?

Prenons le bloc de code suivant pour comprendre le fonctionnement de la méthode ScrollTop ():

Le bloc de code ci-dessus a effectué les fonctionnalités suivantes:

• Créé

  et

  Tags pour ajouter des titres et appliqué en ligne CSS pour les styliser.

• Créé quelques paragraphes en utilisant

  élément.

• Créé un bouton nommé "Cliquez ici!".
• Cliquez sur le «Cliquez ici!"Le bouton invoquera la méthode" topfun () ".
• Dans la méthode TopFun (), nous avons utilisé la méthode ScrollTop ().
• Nous avons passé «0» comme position à la méthode ScrollTop (). Par conséquent, en cliquant sur le «Cliquez ici!”Le bouton fait défiler la page à la position la plus haute.

C'est ainsi que fonctionne la méthode ScrollTop () dans jQuery

Conclusion

En javascript, passant «0, 0» comme paramètre à la fenêtre.ScrolltO () Méthode fera défiler la page à la position la plus haute. Dans jQuery, passant «0» comme argument à la méthode «scrolltop ()» fera défiler la page à la position la plus haute. Ce message a considéré quelques exemples pour fournir une connaissance détaillée de la fenêtre.Méthodes ScrollTo () et ScrollTop ().