La méthode standard
Comme toujours, pour que le javascript fonctionne, il faut
Рun code html adapt̩ au script et bien form̩
– l’inclusion de la librairie jQuery
– le code jQuery d’initilalisation
Un code html adapté
Dans notre cas, le code comporte une partie pour la navigation et des éléments dans la page vers lesquels scroller.
La navigation côté html sera une liste d’ancres. En html, une ancre est un lien interne à une page, pointant vers un élément possédant l’attribut "name" . Ils s’écrivent comme suit :
<a href="#lien1">Premier lien</a>mènera vers
<div id="lien1"></div>Nous avons donc ce code qui a l’avantage d’être dégradable. En absence de javascript, les liens fonctionneront, mais en sautant.
<div id="top"></div>
<div id="nav">
<ul>
<li><a href="#partie1">#1</a></li>
<li><a href="#partie2">#2</a></li>
<li><a href="#partie3">#3</a></li>
</ul>
</div>
<section id="content">
<div id="partie1">
<h2>Un intertitre 1 <a href="#top">Top</a></h2>
<p>Une banque est une entreprise </p>
</div>
<div id="partie2">
<h2>Un intertitre 2 <a href="#top">Top</a></h2>
<p>Le concept de dette est fortement associé au mécanisme de création monétaire dans le système financier moderne. </p>
</div>
<div id="partie3">
<h2>Un intertitre 3 <a href="#top">Top</a></h2>
<p>Une banque est une entreprise qui fait le commerce de l'argent. .</p>
</div>
</section>Inclure jQuery
Dans le header, on place un appel vers les deux fichiers javascript : la librairie et le plugin :
РJQuery sur le site m̬re
Nous les plaçons dans un dossier à côté de la page html.
<script type="text/javascript" src="jquery.js"></script>Activer le tout
En dessous des deux appels de javascript, on placera le code suivant :
<script type="text/javascript">
$(document).ready(function() {
$('nav a').on('click', function() { // Au clic sur un élément
var page = $(this).attr('href'); // Page cible
var speed = 750; // Durée de l'animation (en ms)
$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
return false;
});
});
</script>Pour un scroll horizontal, on modifiera l’animation
$('html, body').animate( { scrollLeft: $(page).offset().left }, speed );Voir la documentation sur le site de jQuery pour scrollTop et scrollLeft
Personnaliser plus
Ce script possède de nombreuses variantes que l’on peut trouver en cherchant sur le net, et plusieurs plugins pour jquery ont été créés, pour paramétrer facilement la vitesse et la fluidité du scroll. Chercher avec les mots clés "jquery scroll plugin" par exemple.