Smooth-Scrolling
Pour faire défiler la page en souplesse jusqu'au lien sur la même page, deux étapes…
1) Faites une ancre
Suivez l'aide pas à pas de jimdo en cliquant sur ce lien
Vous obtenez le lien vers l'ancre :
<a title="#nomDeVotreAncre" href="#nomDeVotreAncre" class="scrollTo">Ancre : aller à "nomDeVotreAncre"</a>
Qui va ressembler à ceci en mode visiteur :
(vous pouvez changer son aspect à partir du code html)
… et une ancre, ailleurs sur la page, dans un module html :
<a name="nomDeVotreAncre" id="nomDeVotreAncre"></a>
Qui n'apparaît pas en consultation.
2) Ajoutez la fonction smooth-scroll
Ajoutez en tête de votre site, grâce à "modifier le Head", (en premier, avant toute modification du Head) la fonction javascript décrite ci-après.
Vous pouvez aussi la déposer dans un module html.
//
$(document).ready(function() {
$('.scrollTo').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;
});
});
//]]>
Revenez dans le lien vers l'ancre, et modifiez son html de façon à lui attribuer la class "scrollTo" :
<p><a title="#nomDeVotreAncre" href="#nomDeVotreAncre" class="scrollTo">Ancre : aller à "nomDeVotreAncre"</a></p>
(une galerie d'image pour modéliser les buggs de Firefox avec les ancres et le javascript)
Et voilà ! Vous parvenez à cette zone de la page directement (et en douceur, si vous venez de la page courante)
Vous pouvez ajouter plusieurs ancres sur la même page, avec des noms différents, bien entendu, pour naviguer d'un sujet à l'autre.
Enfin, vous pouvez modifier le mouvement lui-même en changeant les valeurs du code javascript. Comme ceci :
Pour avoir plus d'explication, et la source de ce code SmoothScroll, lisez cet article