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 :

Aller à "nomDeVotreAncre" 

(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>


Essayez l'ancre :

 

Aller à "nomDeVotreAncre" 


(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 :

 

Essayez cette ancre

Pour avoir plus d'explication, et la source de ce code SmoothScroll, lisez cet article