Javascript, ajouter un bouton de retour vers le haut

La navigation sur certaines pages dont le contenu est volumineux est parfois un peu lourd, rien que revenir en haut de la page peut être fastidieux, alors pourquoi ne pas installer un petit bouton qui apparaît au défilement de la page pour revenir en haut (sans passer par le clavier).

Cela fait un moment que je n’ai pas fait de petite publication sur mon site, plein d’idée en tête, peu de temps, trop de travail et des enfants envahissants (les parents me comprendront et m’excuseront). Sur l’un de ces petits projets plus didactiques qu’utile, il s’agit d’un site de pronostics hippiques (voir http://pmu.surleweb-france.fr) mon second projet devrait vous intéressez mais me prends beaucoup de temps. Revenons à notre sujet, sur le site de pari hippique, sur les pages dont le contenu est important, vous voyez apparaître un petit bouton, c’est celui-ci que je vais expliquer.

Les besoins

Ici pas de grandes difficultés, même si j’ai mis cet article dans javascript, nous utiliserons JQuery qui n’est rien d’autre que du javascript (je simplifie, les puristes …. OUST). Ce code JQuery ne sera pas très compliqué, vous verrez.

Import de JQuery

Commençons par importer JQUERY, nous allons procéder de façon simple, nous verrons dans un autre article les différentes méthodes.

En théorie, votre page internet devrait contenir une balise devrait contenir une balise <head></head>, à l’intérieur de celle-ci, intégrer :

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

Cela va importer la librairie directement de google (on n’aime , on n’aime pas, peu importe c’est pratique).

oui, je ne suis pas cool aujourd’hui

Le code JQUERY

Je passe directement au JQUERY car ce sera très simple, il n’y a même pas d’HTML à insérer (enfin pas directement). Pour ma part, j’aime bien intégrer mes scripts js dans des fichiers que j’importe, cela rend mes pages (côté maintenance) plus simple.

Toujours dans la balise <head></head>, sous l’import précédent, insérer :

<script type="text/javascript" src="/script.js"></script>

Dans ce cas, le fichier script.js se trouve à la racine du site.

Puis dans le fichier script.js :

$(document).ready(function(){
  $('body').append('<a href="#top" class="top_link" title="Revenir en haut de page">Haut</a>');
  $('.top_link').css({
    'position'		:'fixed',
    'right'			:'20px',
    'bottom'		:'50px',
    'display'		:'none',
    'padding'		:'20px',
    'background'		:'#939393',
    '-moz-border-radius'	:'40px',
    '-webkit-border-radius'	:'40px',
    'border-radius'		:'40px',
    'opacity'		:'0.9',
    'z-index'		:'2000',
    'color'			:'white',
    'text-decoration'	:'none'
  });
  $(window).scroll(function(){
    posScroll = $(document).scrollTop();
    if(posScroll >=150)
      $('.top_link').fadeIn(600);
    else
      $('.top_link').fadeOut(600);
  });
});

Je ne vais pas m’attarder sur ce script, mais pour décrire ce qui se passe, voici les étapes :

  1. nous ajoutons un lien
  2. nous appliquons un style à ce lien, par défaut, on ne l’affiche pas (display:none;)
  3. en fonction du défilement (scroll), nous allons faire apparaître ou disparaître ce lien

Conclusion

Il n’y a rien de très compliqué et surtout cela permet de voir ce qui est possible de faire. Faire apparaître un bouton est simple, mais de plus belles choses peuvent être réalisées, si vous avez fait de belles choses, n’hésitez pas à le partager.

Laisser un commentaire