Home-theater-designers
Un bouton « faire défiler vers le haut » est utilisé pour retourner facilement votre vue 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.
ordinateur portable branché, ne charge pas
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
Scroll-to-Top button using JavaScript
Scroll down the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Ici, une structure de base de la page Web est créée avec des données factices. Il vous suffit de vous concentrer sur le bouton de défilement vers le haut.
Lorsque ce bouton est cliqué, la page défile vers le haut. Ce sera fonctionnel après l'ajout du code jQuery.
Code jQuery
En rapport: Apprenez à créer un élément dans jQuery
// ===== Scroll to Top ====
var btn = $('#button');
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the button
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});Ici le spectacle La classe est ajoutée à l'élément button si l'utilisateur fait défiler plus de 300 pixels sur la page Web. Cette spectacle La 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
En rapport: Exemples de code CSS simples que vous pouvez apprendre en 10 minutes
#button {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: 'f077';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
/* Styles for the content section */
.content {
width: 77%;
margin: 50px auto;
font-family: 'Merriweather', serif;
font-size: 17px;
color: #6c767a;
line-height: 1.9;
}
@media (min-width: 500px) {
.content {
width: 43%;
}
#button {
margin: 30px;
}
}
.content h1 {
margin-bottom: -10px;
color: #03a9f4;
line-height: 1.5;
}
.content h3 {
font-style: italic;
color: #96a2a7;
}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 disposez maintenant d'un bouton de défilement vers le haut / vers le haut entièrement fonctionnel. Si vous souhaitez consulter le code source complet utilisé dans cet article, voici le Dépôt 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 concepteur 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.
secureline n'a pas de configuration IP validePartager Partager Tweeter E-mail Vous voulez devenir UX Designer ? Voici comment commencer
C'est le travail de l'UX Designer de s'assurer que les besoins des utilisateurs du logiciel sont pris en compte et qu'ils sont ravis du processus.
Lire la suite Rubriques connexes- La programmation
- JavaScript
- jQuery
Yuvraj est un étudiant de premier cycle en informatique à l'Université de Delhi, en Inde. Il est passionné par le développement Web Full Stack. Quand il n'écrit pas, il explore la profondeur de différentes technologies.
Plus de Yuvraj ChandraAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner