Comment créer un lien de retour haut de page en HTML ?

2 Réponses

répondu par pinkmary 14-Novembre-2019

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>

commentée par Yoan 06-Mars-2022

commentée par pinkmary 06-Mars-2022

répondu par Antoine 14-Novembre-2019

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.

commentée par Zyz 19-Octobre-2021

commentée par A++ 15-Septembre-2022

Comment créer un lien de retour haut de page en HTML ?

Votre réponse

Previsualisation

2 Réponses

Votre commentaire sur cette réponse

Previsualisation

Votre commentaire sur cette réponse

Previsualisation

Questions liées

Mots clés les plus utilisés