{"id":1404,"date":"2011-09-05T12:09:02","date_gmt":"2011-09-05T10:09:02","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1404"},"modified":"2018-01-05T19:32:49","modified_gmt":"2018-01-05T18:32:49","slug":"jquery-effet-smooth-scroll-defilement-fluide","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/jquery-effet-smooth-scroll-defilement-fluide","title":{"rendered":"jQuery – Effet smooth scroll (d\u00e9filement fluide)"},"content":{"rendered":"

L’effet de scroll<\/em> fluide est d\u00e9j\u00e0 int\u00e9gr\u00e9, en fonction de vos param\u00e8tres utilisateur, sur certains navigateurs. Il se manifeste par un d\u00e9filement fluide de la page web lorsque vous descendez ou montez gr\u00e2ce \u00e0 la molette de votre souris, ou les touches de votre clavier. Il est possible de g\u00e9n\u00e9rer cet effet au clic sur une ancre gr\u00e2ce \u00e0 JavaScript.<\/p>\n

Il y a quelques temps de cela (peut-\u00eatre trois ans maintenant) j’avais trouv\u00e9 un script JS pour ajouter cet effet, mais celui-ci ne prenait en compte que les ancres dot\u00e9es de l’attribut name<\/code>, sous cette forme :<\/p>\n

<a href=\"#cible\">Aller \u00e0 \"cible\"<\/a>\r\n<!-- plus loin dans la page -->\r\n<a name=\"cible\"><\/a><\/code><\/pre>\n
Or la cr\u00e9ation d’un \u00e9l\u00e9ment anchor<\/em> dans le seul but de cr\u00e9er une ancre ne me semblait pas la m\u00e9thode la plus propre, mais comme j’\u00e9tais une quiche en JavaScript (\u00e7a n’a pas trop chang\u00e9 d’ailleurs, puisque j’utilise principalement jQuery pour me faciliter l’existence), j’ai fait avec ce code jusqu’\u00e0 ce que je d\u00e9couvre jQuery et le plugin jQuery.scrollTo()<\/a>.
\nPlugin plut\u00f4t efficace, mais tr\u00e8s lourd pour la petite utilisation que j’en faisais.<\/p>\n
C’est pourquoi aujourd’hui je vous propose de cr\u00e9er votre propre script jQuery de smoothscroll<\/em>.
\nVoici une petite d\u00e9monstration sommaire :
\nEffet smoothscroll<\/a>.<\/p>\n
\"\"<\/p>\n
Solution de base<\/h2>\n
NB<\/abbr> : les codes JavaScript qui vont suivre sont \u00e0 placer apr\u00e8s l’appel \u00e0 la biblioth\u00e8que jQuery, fait sous cette forme, par exemple :<\/p>\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.2\/jquery.min.js\" type=\"text\/javascript\"><\/script>\r\n<script type=\"text\/javascript\">\r\n<!-- votre script ici -->\r\n<\/script><\/code><\/pre>\n
Dans le cadre d’une utilisation simple des ancres, votre code HTML doit ressembler \u00e0 peu pr\u00e8s \u00e0 cela :<\/p>\n
<a href=\"#contact\">Contact<\/a>\r\n<!-- plus loin dans la page -->\r\n<h2 id=\"contact\">Contact<\/h2><\/code><\/pre>\n
On a donc simplement un href<\/code> portant une # (di\u00e8se) suivie de la valeur de l’id<\/code> (unique, mais inutile de le rappeler… hein ?) cibl\u00e9.<\/p>\n
On aurait donc un script jQuery dans ce go\u00fbt l\u00e0 :<\/p>\n
$('a[href^=\"#\"]').click(function(){\r\n\tvar the_id = $(this).attr(\"href\");\r\n\tif (the_id === '#') {\r\n\t\treturn;\r\n\t}\r\n\t$('html, body').animate({\r\n\t\tscrollTop:$(the_id).offset().top\r\n\t}, 'slow');\r\n\treturn false;\r\n});\r\n<\/code><\/pre>\n
Au click<\/code> sur un lien dont l’attribut href<\/code> commence (^=<\/code>) par #<\/code>, j’enregistre la valeur de son attribut href<\/code> ($(this).attr(\"href\")<\/code>) dans la variable the_id<\/code>.
\nLes lignes juste apr\u00e8s v\u00e9rifient que le lien ne soit pas juste un hash vide qui m\u00e8nerait nulle part.(merci Rodolphe pour le compl\u00e9ment)
\nPuis je fais une animation (animate()<\/code>) qui consiste \u00e0 scroller (scrollTop<\/code>) vers le haut de l’\u00e9l\u00e9ment cibl\u00e9 ($(the_id).offset().top<\/code>), lentement (slow<\/code>).
\nreturn false;<\/code> permet d’\u00e9viter le comportement normal lors de l’\u00e9v\u00e8nement de clic sur le lien (\u00e0 savoir le saut vers l’ancre et son affichage dans l’url).<\/p>\n
La pr\u00e9sence du s\u00e9lecteur $('html, body')<\/code> permet de corriger un bogue sur Webkit (Chrome et Safari) qui ne semble comprendre qu’une animation sur l’\u00e9l\u00e9ment body<\/code><\/p>\n
Pr\u00e9voir les autres cas de figure, et cr\u00e9er une fonction<\/h2>\n
\"\"Voil\u00e0 mais\u2026, peut-\u00eatre que vous allez vouloir cr\u00e9er une fonction identique pour un syst\u00e8me qui m\u00e9lange id<\/code> et name<\/code>, ou que vous avez l’intention de distribuer g\u00e9n\u00e9reusement un script passe-partout \u00e0 vos visiteurs.<\/p>\n
Pour cela il faut pr\u00e9voir l’exception que nous connaissons, le code va donc \u00eatre plus long.
\nJe vous le pr\u00e9sente, nous allons le d\u00e9tailler apr\u00e8s :<\/p>\n
function juizScrollTo(element){\t\t\t\r\n\t$(element).click(function(){\r\n\t\tvar goscroll = false;\r\n\t\tvar the_hash = $(this).attr(\"href\");\r\n\t\tvar regex = new RegExp(\"\\#(.*)\",\"gi\");\r\n\t\tvar the_element = '';\r\n\u00a0\r\n\t\tif(the_hash.match(\"\\#(.+)\")) {\r\n\t\t\tthe_hash = the_hash.replace(regex,\"$1\");\r\n\u00a0\r\n\t\t\tif($(\"#\"+the_hash).length>0) {\r\n\t\t\t\tthe_element = \"#\" + the_hash;\r\n\t\t\t\tgoscroll = true;\r\n\t\t\t}\r\n\t\t\telse if($(\"a[name=\" + the_hash + \"]\").length>0) {\r\n\t\t\t\tthe_element = \"a[name=\" + the_hash + \"]\";\r\n\t\t\t\tgoscroll = true;\r\n\t\t\t}\r\n\u00a0\r\n\t\t\tif(goscroll) {\r\n\t\t\t\t$('html, body').animate({\r\n\t\t\t\t\tscrollTop:$(the_element).offset().top\r\n\t\t\t\t}, 'slow');\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t}\r\n\t});\t\t\t\t\t\r\n};\r\njuizScrollTo('a[href^=\"#\"]');<\/code><\/pre>\n
Pour r\u00e9sumer simplement, nous allons ex\u00e9cuter notre animation de tout \u00e0 l’heure (ici lignes 22 \u00e0 25) dans la seule condition que notre variable goscroll<\/code> soit ok (true<\/code>).
\nNotre probl\u00e9matique est la suivante : nous savons que l’utilisateur va cliquer sur un lien ayant un attribut href<\/code> commen\u00e7ant par #<\/code>, mais nous ne savons pas s’il faut le mener vers l’\u00e9l\u00e9ment porteur de l’attribut correspondant name<\/code> ou id<\/code>.<\/p>\n
On va donc dans un premier temps faire un simple contr\u00f4le en cherchant une di\u00e8se dans l’attribut href<\/code> (l.<\/abbr>8), si on trouve la di\u00e8se on r\u00e9cup\u00e8re la valeur se trouvant juste apr\u00e8s (l.<\/abbr>9) gr\u00e2ce \u00e0 la RegExp<\/abbr> pr\u00e9par\u00e9e l.<\/abbr>6. Une fois qu’on a la cha\u00eene en question, on va pouvoir chercher un \u00e9l\u00e9ment porteur de l’id<\/code> ou du name<\/code> correspondant \u00e0 cette cha\u00eene.<\/p>\n
Il faut bien commencer par l’un ou par l’autre, j’ai choisi de commencer par l’id<\/code> (lignes 13 \u00e0 14). Il suffit de compter le nombre de \u00ab\u00a0#notre_chaine\u00a0\u00bb, si on en a au moins 1 (on ne devrait en avoir qu’un !) alors on est bien en recherche d’un id<\/code>, si on en a pas, alors on compte le nombre de a<\/code> porteur de l’attribut name<\/code> de valeur \u00ab\u00a0notre_chaine\u00a0\u00bb. (lignes 15 \u00e0 18)<\/p>\n
Dans cette \u00e9tape, nous sommes cens\u00e9s valider l’une ou l’autre des situations, nous r\u00e9cup\u00e8rerons donc forc\u00e9ment une valeur de la variable hash<\/code>, et nous passerons notre variable goscroll<\/code> \u00e0 true<\/code> pour effectuer l’animation.
\nS’il nous arrivait de ne v\u00e9rifier ni l’une ni l’autre des conditions (ni id<\/code>, ni name<\/code>), alors le visiteur verra la page sauter vers le haut, puisque votre lien semble renvoyer vers une ancre inexistante.<\/p>\n
Pour rendre effectif le fonctionnement de la fonction, il ne reste plus qu’\u00e0 en faire l’appel en pr\u00e9cisant les a<\/code> concern\u00e9s. (ligne 29)<\/p>\n
Personnellement, j’ai encore un peu de mal avec notre s\u00e9lecteur sur html<\/code> et body<\/code>, l’animation ne s’ex\u00e9cute-t-elle pas deux fois simultan\u00e9ment ?
\nM\u00eame si \u00e7a marche, ce n’est pas tr\u00e8s propre.
\nDans l’\u00e9tape d’apr\u00e8s, nous allons ajouter un contr\u00f4le, puisque nous savons que la sp\u00e9cificit\u00e9 se trouve sur webkit.<\/p>\n
Cr\u00e9ation d’une extension de jQuery<\/h2>\n
\"\"Cette partie du tutoriel est un peu plus complexe, mais vous permettra de cr\u00e9er une fonction d’extension \u00e0 la biblioth\u00e8que jQuery.
\nCette fonction vous permettra d’ajouter des param\u00e8tres et de cha\u00eener avec d’autres fonctions jQuery.<\/p>\n
Voyons le code de plus pr\u00e8s :<\/p>\n
(function($){\r\n\t$.fn.juizScrollTo = function(speed){\r\n\t\tif(!speed) var speed = 'slow';\r\n\u00a0\t\t\t\r\n\t\treturn this.each(function(){\r\n\t\t\t$(this).click(function(){\r\n\t\t\t\tvar goscroll = false;\r\n\t\t\t\tvar the_hash = $(this).attr(\"href\");\r\n\t\t\t\tvar regex = new RegExp(\"(.*)\\#(.*)\",\"gi\");\r\n\t\t\t\tvar the_element = '';\r\n\u00a0\r\n\t\t\t\tif(the_hash.match(\"\\#(.+)\")) {\r\n\u00a0\r\n\t\t\t\t\tthe_hash = the_hash.replace(regex,\"$2\");\r\n\u00a0\r\n\t\t\t\t\tif($(\"#\"+the_hash).length>0) {\r\n\t\t\t\t\t\tthe_element = \"#\" + the_hash;\r\n\t\t\t\t\t\tgoscroll = true;\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse if($(\"a[name=\" + the_hash + \"]\").length>0) {\r\n\t\t\t\t\t\tthe_element = \"a[name=\" + the_hash + \"]\";\r\n\t\t\t\t\t\tgoscroll = true;\r\n\t\t\t\t\t}\r\n\u00a0\t\t\t\t\t\t\r\n\t\t\t\t\tif(goscroll) {\r\n\t\t\t\t\t\tvar container = 'html';\r\n\t\t\t\t\t\tif ($.browser.webkit) container = 'body';\r\n\u00a0\r\n\t\t\t\t\t\t$(container).animate({\r\n\t\t\t\t\t\t\tscrollTop:$(the_element).offset().top\r\n\t\t\t\t\t\t}, speed);\r\n\t\t\t\t\t\treturn false;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t});\r\n\t};\r\n})(jQuery)\r\n\u00a0\t\r\n$('a[href^=\"#\"]').juizScrollTo('fast').css('color','red');<\/code><\/pre>\n
Comme vous pouvez le voir en derni\u00e8re ligne de ce code, l’appel \u00e0 la fonction se fait diff\u00e9remment et propose une possibilit\u00e9 de cha\u00eenage et de param\u00e9trage.<\/p>\n
\t$.fn.juizScrollTo = function(speed){<\/code><\/pre>\n
\t};<\/code><\/pre>\n
Pour obtenir ce r\u00e9sultat, nous cr\u00e9ons l’extension gr\u00e2ce \u00e0 la ligne 2 o\u00f9 les informations importantes figurent (le nom de la fonction et les param\u00e8tres) sous cette forme :
\n$.fn.nom_de_fonction = function(parametre1,parametre2)<\/code>.<\/p>\n
\t\tif(!speed) var speed = 'slow';<\/code><\/pre>\n
La ligne d’apr\u00e8s nous permet de v\u00e9rifier si le param\u00e8tre speed<\/code> a \u00e9t\u00e9 renseign\u00e9, s’il ne la pas \u00e9t\u00e9 nous attribuons une valeur par d\u00e9faut.
\nIl est possible d’utiliser la fonction extend()<\/code><\/a> pour attribuer un plus grand nombre de param\u00e8tres par d\u00e9faut, cette m\u00e9thode est plus lisible, mais pour l’exemple nous en resterons \u00e0 cette mani\u00e8re de proc\u00e9der.<\/p>\n
\t\treturn this.each(function(){<\/code><\/pre>\n
\t\t});<\/code><\/pre>\n
Nous en sommes \u00e0 la ligne 5, qui poss\u00e8de une particularit\u00e9 : toutes les occurrences (each()<\/code>) de this<\/code> sont retourn\u00e9es. C’est cette partie qui nous permet de cha\u00eener (l.<\/abbr>36). En retournant this<\/code> (l’\u00e9l\u00e9ment sur lequel influe notre fonction) nous pouvons le r\u00e9cup\u00e9rer et le tripatouiller avec une autre fonction \ud83d\ude42
\nSi notre fonction avait pour but de retourner une valeur autre que l’\u00e9l\u00e9ment cibl\u00e9, le cha\u00eenage ne serait plus possible.<\/p>\n
\t\t$(this).click(function(){<\/code><\/pre>\n
\t\t});<\/code><\/pre>\n
Nous entrons ici dans le gestionnaire d’\u00e9v\u00e9nement dont nous avons vu dans les \u00e9tapes pr\u00e9c\u00e9dentes.
\nLe script reste donc quasiment identique, c’est pourquoi je vais m’attarder sur les quelques changements uniquement.<\/p>\n
var container = 'html';  \r\nif ($.browser.webkit) container = 'body'; <\/code><\/pre>\n
Nous cr\u00e9ons la variable container<\/code> qui aura pour valeur html<\/code> par d\u00e9faut, ou body<\/code> si jamais on d\u00e9tecte une navigation sous Webkit.
\nJe vous en avais parl\u00e9 avant, \u00e7a nous permet d’effectuer une animation en ne ciblant que l’un des deux \u00e9l\u00e9ments.
\nIl suffit ensuite de remplacer notre ancien s\u00e9lecteur par la variable (ligne 30).<\/p>\n
}, speed);<\/code><\/pre>\n
Sur cette ligne 31 du code, nous avons renseign\u00e9 notre variable speed<\/code>, qui correspond anciennement \u00e0 la valeur \"slow\"<\/code>.
\nL’utilisateur de la fonction peut donc ais\u00e9ment y renseigner une valeur<\/a> de son choix.<\/p>\n
Pitite conclusion<\/h2>\n
Pour ceux qui sont arriv\u00e9s au bout de ce tutoriel, je vous dis bravo !
\nEn esp\u00e9rant que votre fonction fonctionne \u00e0 merveille, n’h\u00e9sitez pas \u00e0 compl\u00e9ter, corriger ou critiquer ce tutoriel via les commentaires, ou mon formulaire de contact<\/a> pour les timides.<\/p>\n
Il est possible d’aller encore plus loin pour les fondus de jQuery. Par exemple, la fonction animate()<\/a><\/code> peut accueillir une fonction de callback<\/em>. C’est une fonction qui est appel\u00e9e une fois l’animation termin\u00e9e. Vous pouvez donc ajouter en param\u00e8tre de la fonction que nous venons de cr\u00e9er, une possibilit\u00e9 de personnaliser la fonction de callback<\/em>.<\/p>\n
Je vous laisse y r\u00e9fl\u00e9chir\u2026<\/p>\n
Allez, enjoy ! \ud83d\ude09<\/p>\n
Bonux<\/h2>\n
Apr\u00e8s publication de cet article (il y a 20 minutes), je me suis rendu compte que la navigation au clavier n’\u00e9tait pas ais\u00e9e. En effet, une fois la touche Entr\u00e9e<\/kbd> press\u00e9e sur un des liens, l’effet de scroll s’effectue, mais le focus n’est pas donn\u00e9 \u00e0 l’\u00e9l\u00e9ment cibl\u00e9, et pour cause : il ne poss\u00e8de pas de tabindex<\/code> (dans mon cas, c’est une div<\/code>).
\nLa solution consiste \u00e0 passer en fonction de callback<\/em> de la fonction animate()<\/code> la fonction suivante :<\/p>\n
function(){\r\n$(the_hash).attr('tabindex','0').focus().removeAttr('tabindex');\r\n}<\/code><\/pre>\n
Elle permet d’ajouter un tabindex<\/code> de valeur 0<\/code> (permet d’offrir la possibilit\u00e9 de porter le focus \u00e0 un \u00e9l\u00e9ment sans casser l’ordre de tabulation), attribuer le focus, puis retirer le tabindex<\/code> aussit\u00f4t pour ne pas nous retrouver avec des effets de bord.
\nJe ne sais pas ce que \u00e7a vaut en terme d’accessibilit\u00e9, mais \u00e7a semble rendre bien plus ais\u00e9e la navigation au clavier.
\nA vous de voir sur la page de d\u00e9monstration<\/a>.<\/p>\n
Cet article a \u00e9t\u00e9 \u00e9tendu sur cette mise \u00e0 jour<\/a>. Allez y jeter un \u0153il \ud83d\ude09<\/p>\n
\n
Il existe une mise \u00e0 jour<\/h2>\n
    \n
  1. jQuery – Effet smooth scroll (d\u00e9filement fluide)<\/span><\/li>\n
  2. [Mise \u00e0 jour] jQuery – Effet smoothscroll au chargement de la page<\/a><\/li>\n<\/ol>\n<\/div>\n
    \n
    Liens utiles<\/h2>\n