Mettez en place une navigation sans rechargement avec smoothScroll

Aujourd'hui, je vous propose de découvrir une petite ressource Javascript qui vous permettra de mettre en place une navigation sans rechargement et animer les transitions entre les pages de vos sites : Smooth Scroll

Naviguer sans recharger complètement la page

Un des meilleurs moyens pour accélérer la sensation de vitesse sur son site est de créer un système de changement de pages sans rechargement. De cette manière, plus besoin de recharger les ressources externes, et plus besoin d'évaluer de nouveau le CSS.

Autre point non négligeable, cela peut permettre de mettre en place un effet de transition qui "justifiera" aux yeux du visiteur les quelques millisecondes nécessaires pour l'affichage du nouveau contenu.

La solution Pjax

Le problème est que la mise en place d'une ressource de ce style est souvent assez complexe. Un des moyens les plus simples que nous avions à notre disposition pour cela était jusqu'à présent une ressource Javascript, Pjax. 

Problème, cette ressource demande à la fois des connaissances en Javascript et des connaissances niveau serveur, et reste assez complexe à mettre en oeuvre. Que faire quand il n'est pas possible de modifier simplement la partie serveur ? Utiliser SmoothState !

jQuery.SmoothState

SmoothState est une library Javascript nécessitant jquery qui vous permettra de mettre en place bien plus simplement que Pjax un effet "sans rechargement". Tout ce que vous avez à faire est de choisir la zone de votre site qui change à chaque appel, lui appliquer une id (par exemple "main") et de demander à smoothState  de surveiller cette zone avec $('#main').smoothState(); .

La ressource bloquera alors le rechargement sur tous les liens externes présents dans la zone, et ira tout seul récupérer les changements entre le page actuel et le page demandé pour les mettre en place.

Autre point très positif, la ressource nous propose trois hooks sur lesquels nous pouvons accrocher des fonctions permettant d'animer la page : au clic sur le lien, lors du chargement de la page suivante et lors de son affichage.

De cette manière, il est bien plus simple de mettre en place nos effets de transition de pages ! Comme exemple, je vous propose d'aller jeter un oeil au site Aprilzero, qui utilise cette ressource pour ses effets de changement de pages.