Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.
Pour ce premier petit tutoriel, nous allons voir comment ajouter des boutons « go to top » et « go to bottom » avec une petite animation douce en jquery et une jolie intégration en CSS.
Avant de vous lancer dans la lecture de ce tutoriel, vous pouvez voir le résultat final en cliquant sur les petites flèches en bas à droite de votre navigateur web !
Pour commencer, nous allons choisir nos images, ou plutôt notre image.
Pour ceux qui ne comprennent pas pourquoi on utilise cette image sous cette forme là, ce poste pourrait vous éclairer : CSS, changer d’image au survol.
Nous allons maintenant voir le code correspondant à ce que nous voulons faire :
Tout d’abord, nous allons déclarer dans le <header> (c’est à dire entre les balises <header> et </header> de votre page) le code suivant pour appeler le jQuery. Attention toutefois, normalement, vous n’avez pas besoins de le déclarer si vous posséder déjà une bibliothèque jQuery dans votre page. Il pourrait y avoir des conflits.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Il vous suffit maintenant de placer les codes HTML et Javascipt qui vont suivre en bas de page, avant la balise </body> et le CSS dans votre feuille de style.
Le HTML
<div id="srcolling"></div>
Comme vous pouvez le constater, c’est très simple. Nous avons deux liens qui vont être « déclenchés » via le Javascript qui suit.
Le Javascript
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('a.scrollToBottom').click(function(){
$('html, body').animate({scrollTop: $(document).height()}, 1000);
return false;
});
$('a.scrollToTop').click(function(){
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
})
// ]]></script>Ici encore, c’est assez simple dans le principe. On anime le défilement de la page grâce aux balises <body> vers le haut, ou vers le bas.
Le nombre 1000 correspond à la durée de l’animation en millisecondes. Vous pouvez donc aisément le modifier selon votre envie.
Le CSS
#srcolling {
position:fixed;
bottom: 100px;
right:100px;
}
a.scrollToBottom {
display:inline-block;
width:32px;
height:32px;
background: url(‘img/top_bottom.png’) no-repeat left top;
}
a.scrollToBottom:hover {
background:url(‘img/top_bottom.png’) no-repeat left bottom;
}
a.scrollToTop {
display:inline-block;
width:32px;
height:32px;
background: url(‘img/top_bottom.png’) no-repeat right top;
}
a.scrollToTop:hover {
background:url(‘img/top_bottom.png’) no-repeat right bottom;
}Vous devriez voir vos flèches de navigation apparaître en bas à droite de vote navigateur.
Ce script est compatible avec WordPress. Si votre thème utilise jQuery, il vous suffit d’éditer votre fichier footer.php.
Et voilà, c’est terminé ! Ce petit script est vraiment simple à intégrer.
