Comment créer un "Scroll-to-Top" Bouton utilisant JavaScript et jQuery
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.
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Scroll-to-Top button using JavaScript</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
<!-- BUTTON NEEDS FONT AWESOME FOR CHEVRON UP ICON, YOU CAN USE LATEST VERSION FOR MORE ICONS -->
<!-- https://www.bootstrapcdn.com/fontawesome/ -->
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body id="top">
<h1>
Scroll To Top
</h1>
<div class="long-text">
<p>Scroll down to see the button.</p>
<p>Click the button to see smooth scroll to top.</p>
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.<br><br>
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.<br><br>
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.<br><br>
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.<br><br>
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.<br><br>
</div>
<div id="scrolltop">
<a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>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.
<div id="scrolltop">
<a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
</div>Le bouton de défilement vers le haut pointe vers le haut de la page en utilisant l'identifiant #top . #top est l'identifiant de la balise <body> . L'icône du bouton de défilement vers le haut est créée à l'aide de la police Awesome .
Code JavaScript
// ===== Scroll to Top ====
const scrollTop = document.getElementById('scrolltop')
// When the page is loaded, hide the scroll-to-top button
window.onload = () => {
scrollTop.style.visibility = "hidden";
scrollTop.style.opacity = 0;
}
// If the page is scrolled more than 200px,
// display the scroll-to-top button
// Otherwise keep the button hidden
window.onscroll = () => {
if (window.scrollY > 200) {
scrollTop.style.visibility = "visible";
scrollTop.style.opacity = 1;
} else {
scrollTop.style.visibility = "hidden";
scrollTop.style.opacity = 0;
}
};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
html {
scroll-behavior: smooth;
}
#scrolltop {
display: block;
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.5s ease-in;
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.4);
border-radius: 20%;
}
.top-button {
text-decoration: none;
cursor: pointer;
padding: 30px;
color: #222;
}
body {
background: linear-gradient(180deg, #0697f9 0%, #f898bf 100%);
color: #fff;
font-family: 'Quicksand', sans-serif;
font-size: 24px;
line-height: 1.4;
text-align: center;
padding: 40px;
}
.long-text {
max-width: 700px;
margin: 0 auto;
padding: 40px;
background: rgba(0, 0, 0, 0.2);
}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 selon 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Back to top button using jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,900,900i" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<!-- Back to top button -->
<a id="button"></a>
<!-- Some content to fill up the page -->
<div class="content">
<h1>Back to Top Button</h1>
<h3>Scroll down the page</h3>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>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.
<a id="button"></a>Lorsque ce bouton est cliqué, la page défile vers le haut. Ce sera fonctionnel après l'ajout du code jQuery.
Code 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, la classe show est ajoutée à l'élément button si l'utilisateur fait défiler plus de 300 pixels sur la page Web. Cette classe show rend l'élément button 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
#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 jeter un œil au code source complet utilisé dans cet article, voici le référentiel GitHub de celui-ci.
Remarque : le code utilisé dans cet article est sous 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 champ vous intéresse, vous devez suivre le bon chemin pour commencer.