Accueil > Tutoriels pour Webmasters > [jQuery] Créer un bouton de retour en haut de page

[jQuery] Créer un bouton de retour en haut de page

La bibliothèque jQuery est gratuite et permet d'ajouter des effets en Javascript sur un site web. Ce tutoriel explique comment créer un bouton qui permet de retourner en haut de page, grâce à un effet de scroll plus agréable à regarder qu'un effet basique qui consiste à "sauter" en haut de page.
Pour tester ce que permet de faire ce tutoriel, il est possible d'utiliser cette page d'exemple: bouton jQuery de retour en haut de page.

Prérequis

Il n'est pas nécessaire d'avoir des connaissances en Javascript, ni même de grande connaissance en XHTML. Il faut juste être un peu débrouillard et avoir un site sur lequel il est possible de personnaliser la source.

Installer la bibliothèque jQuery

La première étape consiste à ajouter la bibliothèque jQuery dans la source de la page web. Il y a un code à utiliser pour que cette bibliothèque puisse s'utiliser. Pour cela il faut ajouter le code suivant entre les balises <head> et </head> de la page web:

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

Ce code récupère la bibliothèque jQuery sur une adresse externe. L'avantage, c'est que certains sites utilisent déjà ce code et que les visiteurs peuvent donc déjà avoir la bibliothèque en cache sur le navigateur. En d'autres mots, il n'y a pas besoin de la télécharger à nouveau, ce qui accélère le temps d'affichage des pages web.

Alternativement, il est possible de se rendre sur le site de jQuery, de télécharger la dernière version de la bibliothèque, de l'envoyer sur un site web et d'adapter le code précédent en remplaçant la valeur de src.

Bouton XHTML

La seconde étape consiste à ajouter le bouton dans le corps de la page. Il y a plusieurs façons de créer un tel bouton. Pour faire simple, le code suivant peut être inséré en bas de page:

<div><a href="#header">Retour en haut</a></div>

Ce code créer un lien. Par défaut il permet de retourner en haut de page sans effet. Il faut ajouter un code pour que jQuery améliore l'effet pour retourner en haut.

Code jQuery

Pour finir, il faut insérer ce code Javascript dans le code de la page web, entre <head> et </head>:

<script type="text/javascript">
$(function() {
  $('a[href=#header]').click(function(){
    $('html').animate({scrollTop:0}, 'slow');
    return false;
  });
});
</script>

Ce code donne un effet d'animation, lorsqu'un internaute clique sur un lien qui pointe vers une ancre "header". Pour tester le résultat il faut ouvrir une page web qui est suffisamment longue, descendre sur la page et cliquer sur le lien "Retour en haut". Normalement, le résultat sera le même que l'effet sur la page d'exemple de ce tutoriel.