Scripts et Programmation

HTML + JS + CSS : Créer un bouton "Vers le haut" sur son site

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Table des matières
  1. Introduction
  2. Mise en pratique
    1. Prérequis
    2. Mise en place du bouton
    3. Afficher le bouton
  3. Le code "Tout en 1"


Introduction





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.



Mise en pratique





Voici mon corps de page :





Code HTML :
 
<html>
  <head>
    <title>Ma super page</title>
  <head>
<body>
 
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
 
</body>
</html>






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 <head> de notre site :



Code HTML :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>






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>




Le bouton utilisé est celui-ci :

to_top



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



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




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





Afficher le bouton





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 :



Code JAVASCRIPT :
 
            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
                        }
 
                    });
                });
            });
 




Il faut juste s'assurer qu'elle est appelée après JQuery évidemment.





Le code "Tout en 1"





Voici le code tout en 1.



Il est recommandé de mettre le style dans un fichier CSS, le javascript dans un fichier .js et l'image dans un dossier images.

Ces fichiers sont sans doute présents si le site est déjà créé.



Code HTML :
<html>
<head>
 
<style>
#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 
<script>
            jQuery(function(){
                $(function () {
                    $(window).scroll(function () {
                        if ($(this).scrollTop() > 200 ) { 
                            $('#scrollUp').css('right','10px');
                        } else { 
                            $('#scrollUp').removeAttr( 'style' );
                        }
 
                    });
                });
            });
</script>
 
 
</head>
 
<body>
 
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
<h2>Du texte</h2>
 
<div id="scrollUp">
<a href="#top"><img src="to_top.png"/></a>
</div>
</body>
</html>




Et l'image : to_top.png