Faire scroller la page doucement avec jQuery

Jquery permet de se déplacer dans une page avec douceur. Il est possible de le faire avec juste la librairie.

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

<a name="lien1"></a>

Nous avons donc ce code qui a l’avantage d’être dégradable. En absence de javascript, les liens fonctionneront, mais en sautant.

<a name="top"></a>
<div id="nav">
<ul>
<li><a href="#elem1">#1</a></li>
<li><a href="#elem2">#2</a></li>
<li><a href="#elem3">#3</a></li>
</ul>
</div>

<div id="content">
<a name="elem1"></a>
<h2>Un intertitre 1 <a href="#top">Top</a></h2>
<p>Une banque est une entreprise </p>

<a name="elem2"></a>
<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>

<a name="elem3"></a>
<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>

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() {
// activer les liens internes, précédé par un #
$('a[href^="#"]').click(function() {
// prendre le nom du lien, substr enleve le premier caractere qui est #
var ou = $(this).attr("href").substr(1);
// trouver le tag <a name=""> correspondant
var saut = $("a[name='"+ ou +"']");
// aller jusqu'à cet élément
$('html,body').animate({scrollTop: $(saut).offset().top}, 1000);
return false;
});
});
</script>

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.