johanBleuzen

Un petit article rapide sur une petite fonctionnalité que je voulais mettre depuis longtemps sur mon site, mais que je n’avais pas eu le temps de mettre en place. Ça consiste à ajouter un div transparent en bas de page qui permet de remonter tout simplement en haut de page. Bien entendu on va ajouter des petits effets jQuery histoire de rendre cela un petit peu plus agréable pour les yeux…

Le code jQuery

Tout d’abord, on va commencer par enregistrer tous les évènements de scroll sur la page avec le code suivant :

javascript$(window).scroll(function() { // Ajouter le comportement que vous voulez... });

Moi ce que je voulais c’était ajouter une div avec un lien a qui permette de retourner en haut de page. J’ai donc ajouté un peu de logique à la fonction précédente de sorte que le code devienne :

$(window).scroll(function() {
  if($(window).scrollTop() == 0){
    $('#scrollToTop').fadeOut("fast");
  } else {
    if($('#scrollToTop').length == 0){
      $('body').append('<div id="scrollToTop">'+
        '<a href="#">Retour en haut</a>'+
        '</div>');
    }
    $('#scrollToTop').fadeIn("fast");
  }
});```

Ce code est tout simple, lorsque la position du scroll est à 0, il cache le div de retour en haut de page et lorsque la position n'est pas égale à 0, il vérifie si la div <code>#scrollToTop</code> existe, si ce n'est pas le cas, il la créée puis l'affiche.

Ainsi lorsque vous "scrollerez" sur votre page, vous devriez voir apparaitre tout en bas une <code>div</code> avec un lien "Retour en haut". Lorsque vous cliquerez sur ce lien, vous serez automatiquement envoyé en haut de la page. On va ajouter encore un peu de code jQuery pour que le scroll qui remonte en haut de la page soit "joli" :

``` javascript
$('#scrollToTop a').live('click', function(event){
  event.preventDefault();
  $('html,body').animate({scrollTop: 0}, 'slow');
});

Ce code va tout simplement «animer» votre scroll jusqu’en haut de la page, on ne peut plus simple…

Le code CSS

Bon maintenant il faut ajouter un peu de magie CSS pour que le bouton apparaisse toujours en bas à droite de la page web. On ajoute donc le code suivant dans la feuille de style :

css/** ScrollToTop **/ #scrollToTop a{ position: fixed; right: 20px; bottom: 10px; background-color: rgb(255,255,255); /** rgba fallback**/ background-color: rgba(255,255,255, 0.7); padding: 7px 10px; border: 1px solid #000; } #scrollToTop a:hover{ box-shadow: 0px 0px 5px #222; -moz-box-shadow: 0px 0px 5px #222; -webkit-box-shadow: 0px 0px 5px #222; text-decoration: none !important; }

Et voila, c’est aussi simple que ça, si vous avez bien suivi les instructions vous devriez vous le bouton «Retour en haut» qui apparait en bas à droite de votre page des que vous utilisez la molette de votre souris vers le bas. Et lorsque vous remonterez le bouton disparaitra comme par magie.

Conclusion

Pour la démo, je vous conseille de naviguez sur mon site et de regarder en bas à droite, la petite flèche… J’ai testé ce code sur les navigateurs récents (Safari, Chrome, Firefox) ainsi que sur IE et je n’ai pas noté de problème particulier (sauf IE, voir en dessous). Dans l’éventualité ou vous auriez des problèmes, n’hésitez pas à me demander un coup de main dans les commentaires.

Problèmes:

• Pour l'instant ce n'est pas compatible avec Safari iPhone à cause du position:fixed;. Je vais devoir chercher une solution.
• Avec Opéra, l'effet de scrollToTop ne fonctionne pas. Apparement c'est un problème connu. Je n'ai pas tenté de résoudre ce problème, car c'est fonctionnel en mode dégradé mais fonctionnel !
• Avec IE8, les effets de fadeIn() et fadeOut() ne fonctionnent pas, j'ai l'impression qu'ils sont remplacés par show() et hide(). C'est peut être un soucis lié à la manière dont je positionne ma div #scrollToTop...