Comment créer un lien de retour haut de page en HTML ?
Quels sont les différents moyens de créer un lien, ou un bouton, de retour vers le haut de la page, en HTML ?
Pour créer simplement un lien qui mène au haut d'une page Web, procédez comme suit :
Dans votre code HTML, immédiatement après la balise d'ouverture <body>, ajoutez le code suivant:
<a id="haut"></a>
Ensuite, placez le code suivant à l'endroit où vous désirez voir apparaitre le lien Haut de page :
<a href="#haut">Retour en haut de la page</a>
Vous venez de créer un lien de retour haut de page juste avec un peu de code HTML.
Vous pouvez également utiliser JavaScript et l'élément scrollTop pour déterminer la position de la barre de défilement, et selon celle-ci, faire apparaitre ou non le bouton pour le retour vers le haut de page.
Dans l'exemple ci-dessous, on fait apparaitre un lien vers le haut de page, uniquement lorsque la barre de défilement est à plus de 100 pixels du haut de la page.
Pour faire apparaitre ou disparaitre le lien, on utilise les feuilles de styles CSS et la fonction display avec ses valeurs block et none.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
html {
scroll-behavior: smooth;
}
#haut {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: orange;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#haut:hover {
background-color: #ddd;
}
</style>
<div style="height:5000px">
<button onclick="retourHaut()" id="haut" title="Retour haut de page">Haut</button>
</div>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100)
{
document.getElementById("haut").style.display = "block";
}
else
{
document.getElementById("haut").style.display = "none";
}
}
function retourHaut() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>