Bouton retour vers le haut¶

L'icône de retour vers le haut est très utile pour permettre de défiler rapidement vers le début de la page lorsque la page est très longue.

Afficher l'image en permanence¶

En début de session, nous avons vu comment afficher un bouton de retour vers le haut fixe dans l'écran.

Rappel :

CSS qui fixe une image à un endroit donné dans la page

img {
    position: fixed;    /*Rend la position fixe*/
    bottom: 2rem;       /*Indique la distance du bas*/
    right: 2rem;        /*Indique la distance de la droite*/
}

Afficher l'image lors du défilement¶

Dans ce cas, on doit détecter le défilement de la page, puis afficher l'image lorsque la page aura défilé d'un nombre déterminé de pixels.

Puisqu'on doit réagir (afficher) à une action de l'utilisateur (défilement), on doit alors utiliser du Javascript.

HTML

<!--Sur le défilement du body-->
<body onscroll="afficherIconeHaut()">
    ...
    <img id="fleche_haut" src="img/flecheHaut.png" alt="Icone de retour vers le haut">
</body>

CSS

/*Positionner et cacher l'icône par défaut*/
#fleche_haut {
    display: none;
    position: fixed;    
    bottom: 2rem;      
    right: 2rem;
}

Javascript

function afficherIconeHaut()
{
    /*Si la fenêtre a défilé d'au moins 500px, afficher. Sinon cacher*/
    if(window.scrollY > 500)
    {
        document.getElementById("fleche_haut").style.display = "inline-block";
    }
    else
    {
        document.getElementById("fleche_haut").style.display = "none";
    }
}

Retour