Vous souhaitez égayer la navigation entre les rubriques en y ajoutant un effet de défilement animé (« smooth scroll ») en jQuery ? Voici quelques explications pour l'implémenter dans une page WebDev.
Rien de bien compliqué à mettre en oeuvre.
Insérez le script dans votre page
Insérez simplement ce script dans l'initialisation de la page ou vous souhaitez un scrolling plus 'smooth' qu'un simple repositionnement.
MoiMême..HTMLEntête += [
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(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;
}
);
}
);
</script>
]
Testons ! (oui c'est tout ou presque)
Créez une nouvelle page avec un lien en haut, et agrandissez votre page en hauteur pour qu'elle ne s'affiche pas en plein page sur votre navigateur.
En bas de la page créez un libellé et définissez le comme une ancre (onglet général du libellé)
Ensuite, ouvrez les paramètres du lien en haut de page, et cliquez sur le bouton 'Autres actions...' et sélectionnez l'option "Se positionner sur une ancre de la page" puis sélectionnez votre libellé qui doit apparaitre dans la liste. Validez
Dans l'onglet 'Avancé' du lien Ajoutez la classe 'scrollTo' dans la table "valeur ajoutée dans l'attribut 'class' du champ". Validez le tout.
Testez ! Normalement lorsque vous cliquez sur le lien, la page doit scroller mais pas d'un coup...