{tuto} Créer un bouton haut de page en Jquery

Création et placement du bouton " retour en haut "

La première chose à faire est de créer un bouton :

<div id="btn_up">
   <img alt="Retour en haut" title="Retour en haut" src="fleche.png" width="40" />
</div>

Il suffit de créer une < div > dans laquelle on insère une icone, comme une fleche par exemple. La balise < title > permet d'afficher une bulle d'information indiquant " retour en haut " au passage de la souris.

Ensuite, nous allons styliser l'ensemble grace au css suivant :

#btn_up
{
position: fixed;
bottom: 15px;
right: 25px;
cursor: pointer;
display:none;
}

Présenté comme ceci, le bouton sera placé en position fixe à 25px du bord droit et à 15px du bas de l'écran. Le " cursor: pointor " permet d'afficher une main lors du passage de la souris.
Libre à vous de modifier la position du bouton à votre convenance :)

Réaliser un joli effet grace à Jquery

Afin de réaliser un jolie effet de remonté lorsque l'on clique sur le bouton, nous allons importer la bibliothèque Jquery :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">$(function(){
$('#btn_up').click(function() {
    $('html,body').animate({scrollTop: 0}, 'slow');
});

$(window).scroll(function(){
    if($(window).scrollTop()<50){
        $('#btn_up').fadeOut();
    }else{
        $('#btn_up').fadeIn();
    }
});
});</script>

Personnalisation du script

Pour jouer sur la vitesse de remonté, vous pouvez modifier la 2eme ligne du code en remplacant 'slow' (600 ms) par 'normal' (400 ms) ou 'fast' (200 ms).

Vous pouvez également choisir à quel moment du scroll de la page ce bouton doit apparaitre. Pour cela il faut modifier la valeur de " if($(window).scrollTop()<50){ " ( Ici le bouton apparait à partir de 50 pixels de scroll vers le bas. )

Voila ce tutoriel est termimé ! à très bientôt pour de nouveau tuto :)

Christian Aslan