2025 > Cette page n'est plus en conformité avec le web actuel.
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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
</script><script type="text/javascript">
//<![CDATA[
$(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;
});
});
$(document).ready(function() {
$('.scrollToLent').click( function() {
var page = $(this).attr('href');
var speed = 3000;
$('html, body').animate( { scrollTop:
$(page).offset().top }, speed );
return false;
});
});
/*fixer le problème des ancres qui marchent pas dans firefox*/
$(document).ready(function () { var anchor_id = window.location.hash; if (anchor_id != "") { var new_position = $(anchor_id).offset(); window.scrollTo(new_position.left,new_position.top); }
});
//]]>
</script>
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