Comment créer un bouton « Défiler vers le haut » en utilisant JavaScript et jQuery

Un bouton « faire défiler vers le haut » est utilisé pour revenir facilement en haut de la page. Cette petite fonctionnalité UX est très courante dans les sites Web modernes. C’est particulièrement utile pour les pages Web qui ont beaucoup de contenu, comme les applications d’une seule page.

Dans cet article, vous apprendrez à créer un bouton de défilement vers le haut à l’aide de JavaScript et jQuery.

Comment créer un bouton de défilement vers le haut à l’aide de JavaScript

Vous pouvez ajouter un bouton de défilement vers le haut à votre site Web à l’aide de l’extrait de code suivant :

Code HTML

Ici, une structure de base de la page Web est créée avec des données factices. Vous n’avez qu’à vous concentrer sur le bouton de défilement vers le haut.

Le bouton de défilement vers le haut pointe vers le haut de la page à l’aide du #Haut identifiant. #Haut est l’identifiant du étiqueter . L’icône du bouton de défilement vers le haut est créée à l’aide de police géniale.

Code Javascript

Le bouton de défilement vers le haut est affiché et masqué selon les conditions suivantes :

• Lorsque la page est chargée, le bouton de défilement vers le haut est masqué.
• Le bouton de défilement vers le haut reste masqué jusqu’à ce que la page défile de 200 pixels. Vous pouvez modifier les pixels selon vos besoins.

Code CSS

Le CSS ci-dessus est utilisé pour styliser le bouton de défilement vers le haut et la page Web. Vous pouvez jouer avec le CSS et styliser le bouton en fonction de vos besoins.

Comment créer un bouton de défilement vers le haut à l’aide de jQuery

Vous pouvez ajouter un bouton de défilement vers le haut à votre site Web à l’aide de l’extrait de code suivant :

Code HTML

Ici, une structure de base de la page Web est créée avec des données factices. Vous n’avez qu’à vous concentrer sur le bouton de défilement vers le haut.

Lorsque ce bouton est cliqué, la page défile vers le haut. Cela sera fonctionnel après l’ajout du code jQuery.

Code jQuery

Ici le Afficher class est ajouté à l’élément button si l’utilisateur fait défiler plus de 300 pixels sur la page Web. Cette Afficher classe rend l’élément bouton visible. Par défaut, la visibilité de l’élément bouton est masquée. Plus de détails sur le bouton sont dans le code CSS suivant.

Code CSS

Le CSS ci-dessus est utilisé pour styliser le bouton de défilement vers le haut et la page Web. Vous pouvez jouer avec le code CSS et styliser le bouton selon vos besoins.

Vous avez maintenant un bouton de défilement vers le haut / retour vers le haut entièrement fonctionnel. Si vous souhaitez consulter le code source complet utilisé dans cet article, voici le Référentiel GitHub du même.

Noter : Le code utilisé dans cet article est Licence MIT.

En savoir plus sur l’expérience utilisateur

L’expérience utilisateur se concentre sur la question de savoir si un produit répond aux besoins de ses utilisateurs. Si vous êtes un designer ou un développeur, vous feriez bien de suivre les principes de conception UX et de créer des produits géniaux. Si ce domaine vous intéresse, vous devez suivre le bon chemin pour commencer.