Mettre en place une navigation sans rechargement

Le 24/11/2015

Aujourd'hui, LeBlogDuWebdesign vous propose de découvrir une 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.

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 la page actuelle et la page demandée pour les mettre en place.