[JS]Défilement fluide (smooth-scrolling)

Préambule

La mise en œuvre d'un « défilement fluide » donne une impression agréable du site tout en ajoutant un petit côté « pro » supplémentaire même si cela peut vite devenir désagréable lors d'abus d'effets.

Réaliser un « défilement fluide », d'un endroit à un autre de la page, est normalement devenu une chose simple depuis l'introduction de la propriété CSS scroll-behavior.

Cette propriété peut être appliquée sur l'ensemble du document ou sur une boîte en particulier en utilisant les règles suivantes :

/* sur l'ensemble du document */
html {
  scroll-behavior: smooth;
}
/* sur un élément particulier */
#box-cible {
  scroll-behavior: smooth;
}

Cela ne s'applique toutefois pas aux défilements effectués par l'utilisateur lors d'un scroll via la molette de la souris ou la barre de défilement.

Il y a néanmoins un petit bémol à tout cela, à savoir que les navigateurs peuvent choisir d'ignorer cette propriété, ce que l'on appelle les réglages par défaut.

Activer/désactiver le « défilement fluide ».

Même si cela n'est pas vraiment le sujet ici, activer ou désactiver ce type de défilement n'est pas forcément très compliqué à réaliser mais doit se faire sur le navigateur de l'utilisateur sur lequel vous n'avez aucune emprise, et c'est tant mieux.

Sur Chrome 

• Saisir dans la barre d'adresse : chrome://flags/#smooth-scrolling ;
• Sélectionner l'état « Disabled » pour désactiver ou « Enabled » pour activer l'effet ;
• Redémarrer le navigateur.

Sur FireFox :

• Saisir dans la barre d'adresse : about:preferences ;
• Dans la section Navigation cocher/décocher l'option « Utiliser le défilement doux » pour activer/désactiver l'effet.

On ne s'étendra pas sur les autres navigateurs et on notera que d'autres paramètres sont également réglables sous FireFox.

Bon c'était juste pour information.

Comment faire en JavaScript ?

Tout le monde, ou presque, connaît la façon simple de faire en utilisant la bibliothèque jQuery et le code minimum suivant :

$(container).animate({
    scrollTop: $(element_target).offset().top
  });

De plus en cherchant un peu, on trouve de nombreux plugins reposant sur cette bibliothèque et faisant le travail.

Certes mais ici nous n'utilisons pas de bibliothèque externe, donc on réinvente la roue !

Fonction smoothScrolling([target[, parent]])

Cette fonction n'est pas compatible avec la règle CSS suivante :

element {
  scroll-behavior: smooth;
}

La fonction, sur base de la méthode window.requestAnimationFrame, entre en « conflit » avec le processus de défilement du navigateur, il ne faut donc pas l'insérer dans votre CSS et là vous avez la main.

Syntaxe

smoothScrolling([target[, parent]]);

Exemple d'appel

const cible = document.getElementById("cible");
const conteneur = document.getElementById("conteneur");
// remonte en haut de page
smoothScrolling();
// fait défiler la page jusqu'à l'élément cible
smoothScrolling(cible);
// fait défiler le contenu du conteneur jusqu'à l'élément cible
smoothScrolling(cible, conteneur);

Exemple utilisé dans cette page

const innerLinks = document.querySelectorAll("[href^='#']");
innerLinks.forEach((a) => {
  a.addEventListener("click", (e) => {
    e.preventDefault();
    const ancre = e.target. /*hash;*/ href.split("#").pop();
    const target = document.getElementById(ancre);
    smoothScrolling(target);
  });
});

Code de la fonction

Le code complet est disponible dans le fichier smoothscroll.js

Ressources

• La propriété CSS scroll-behavior
• Animation Frames