Créer un bouton retour vers le haut avec html css et javascript

Si on a un site web qui possède de grandes pages, il peut être utile d'afficher un bouton pour retourner en haut de page. Il est judicieux de placer le bouton en bas à droite. Le but est qu'il s'affiche une fois 200 pixels de page descendu.

Prérequis
Bien souvent, sur les sites, on utilise du JQuery. Je vais donc utiliser une fonction JQuery. Si tel n'est pas le cas, appeler JQuery dans la balise de notre site :

Mise en place du bouton

On créé une div, avec notre bouton dedans. J'ai opté pour une image, de dimension 35x35 environ.

Code HTML:

        
    <div id="scrollUp">
<a href="#top"><img src="to_top.png"/></a></div>

Code CSS

On applique du style dans notre feuille de style, pour positionner ce bouton en bas à droite de page, fixé

#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}

Infos
Le -100px est important, puisqu'au chargement de la page, le bouton sera masqué.

Code JavaScript

Bien, on a notre bouton et il est masqué. Maintenant, il ne reste qu'a l'afficher au bout de 200pixels descendus. Pour cela, une petite fonction avec JQuery pourra répondre à nos besoins :

jQuery(function(){ $(function () { $(window).scroll(function () { //Fonction appelée quand on descend la page if ($(this).scrollTop() > 200 ) { // Quand on est à 200pixels du haut de page, $('#scrollUp').css('right','10px'); // Replace à 10pixels de la droite l'image } else { $('#scrollUp').removeAttr( 'style' ); // Enlève les attributs CSS affectés par javascript } }); });
});

Le code complet

Cliquez sur ce bouton pour installer le code source de ce projet et n'hésitez pas à lâcher une réaction :)

Demo Télécharger

---

document.zip 108kb