par

Quels sont les différents moyens de créer un lien, ou un bouton, de retour vers le haut de la page, en HTML ?

2 Réponses

+1 validé
par

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 name="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.

+1 validé
par

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>
#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>

Lecture Recommandée

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Offre Sponsorisée

Ailleurs sur le Web

Questions liées

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...