{"id":1580,"date":"2011-11-21T08:47:34","date_gmt":"2011-11-21T07:47:34","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1580"},"modified":"2015-01-18T16:20:50","modified_gmt":"2015-01-18T15:20:50","slug":"mise-jour-jquery-effet-smoothscroll-au-chargement-page","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/mise-jour-jquery-effet-smoothscroll-au-chargement-page","title":{"rendered":"[Mise \u00e0 jour] jQuery – Effet smoothscroll au chargement de la page"},"content":{"rendered":"

Apr\u00e8s une demande re\u00e7ue par e-mail, je me suis dit que la fonctionnalit\u00e9 serait peut-\u00eatre utile \u00e0 d’autres que moi.
\nLors de la r\u00e9daction de ce tutoriel : jQuery – Effet Smooth Scroll (d\u00e9filement fluide)<\/a>, la complexit\u00e9 du contenu m’a fait retirer une extension int\u00e9ressante \u00e0 la derni\u00e8re fonction\/plugin propos\u00e9e.<\/p>\n

\n

Il s’agit d’une mise \u00e0 jour<\/h2>\n
    \n
  1. jQuery – Effet smooth scroll (d\u00e9filement fluide)<\/a><\/li>\n
  2. [Mise \u00e0 jour] jQuery – Effet smoothscroll au chargement de la page<\/span><\/li>\n<\/ol>\n<\/div>\n

    Avant propos<\/h2>\n

    \"\"C’est toujours dans une optique de simplicit\u00e9 que j’essaye de pr\u00e9senter mes tutoriels. Il est clair qu’il y a des points parfois difficiles \u00e0 faire comprendre au plus grand nombre, c’est aussi pour cela que je vous invite toujours \u00e0 me signaler toute incompr\u00e9hension sur un tutoriel que vous liriez.<\/p>\n

    C’est aussi pour cela qu’il m’arrive d’avoir des tutoriels complexes, et de les \u00e9purer en retirant des \u00e9l\u00e9ments que je juge inutiles – au moins dans un premier temps.<\/p>\n

    Mise \u00e0 jour<\/h2>\n

    Le tutoriel \u00ab\u00a0jQuery – Effet Smooth Scroll (d\u00e9filement fluide)<\/a>\u00a0\u00bb a \u00e9t\u00e9 mis \u00e0 jour aujourd’hui m\u00eame afin de faire b\u00e9n\u00e9ficier \u00e0 sa troisi\u00e8me partie<\/a> d’une meilleure prise en charge des URL absolues fournies d’un hash (exemple : http:\/\/creativejuiz.fr\/blog#kiwi<\/code>).<\/p>\n

    Ce tutoriel utilise l’objet $.browser<\/a> retir\u00e9 depuis la version 1.9 de jQuery. Pour plus d’information : Note de version 1.9 de jQuery<\/a>.
    \nVous pouvez cependant utiliser le script compl\u00e9mentaire pr\u00e9sent sur     Chez-Syl.fr<\/a>. Merci \u00e0 Xeroc pour l’info.<\/p>\n

    Pour les utilisateurs de jQuery 1.9 et sup\u00e9rieures, il faudra penser \u00e0 remplacer dans le code ci-dessous :
    \nLive() : $(this).live('click', function()<\/code> par: $(this).on('click', function()<\/code><\/p>\n

    Effet de d\u00e9filement au chargement de la page<\/h2>\n

    Pour effectuer un effet de d\u00e9filement, voil\u00e0 comment expliciter la chose en fran\u00e7ais :
    \n\u00ab\u00a0On cherche \u00e0 obtenir le m\u00eame r\u00e9sultat qu’au clic sur l’ancre porteuse du lien vers la cible pr\u00e9sente dans la barre d’adresse.\u00a0\u00bb<\/p>\n

    Voir la d\u00e9monstration<\/a><\/p>\n

    Il nous faut prendre la phrase \u00e0 l’envers et la transformer en jQuery.
    \nDonc en plusieurs \u00e9tapes il nous faut :<\/p>\n

      \n
    1. R\u00e9cup\u00e9rer le contenu de la barre d’adresse<\/li>\n
    2. R\u00e9cup\u00e9rer uniquement le hash<\/em><\/li>\n
    3. Chercher dans notre document quel \u00e9l\u00e9ment pour l’attribut href="#hash<\/em>"<\/li>\n
    4. Simuler un clic sur cette \u00e9l\u00e9ment pour d\u00e9clencher le d\u00e9filement<\/li>\n<\/ol>\n

      Ok, voici un code qui fait \u00e7a :<\/p>\n

      function trigger_click_for_slide() {\r\n      var the_hash = document.location.hash;\r\n      if(the_hash)\r\n          $('a[href~=\"'+the_hash+'\"]').trigger('click');\r\n}\r\ntrigger_click_for_slide();<\/code><\/pre>\n
      La ligne 2 nous permet de stocker directement le hash (fin de l’URL) dans une variable.
      \nLa ligne 3 permet de v\u00e9rifier l’existence d’un hash en bout d’URL.
      \nLa ligne 4, primordiale, permet de simuler (trigger<\/code>) l’\u00e9v\u00e8nement click<\/code> sur l’\u00e9l\u00e9ment porteur d’un href<\/code> ciblant le hash trouv\u00e9 dans l’URL.<\/p>\n
      Pourquoi imiter le clic sur un lien plut\u00f4t que d’effectuer directement une animation ?
      \nPour \u00e9viter de r\u00e9\u00e9crire une portion du code, et aussi pour limiter les animations vers les ancres pr\u00e9vues par notre syst\u00e8me de navigation.<\/p>\n
      Ce morceau de code peut \u00eatre plac\u00e9 apr\u00e8s la cr\u00e9ation d’une des mini fonctions vues dans l’article jQuery – Effet Smooth Scroll (d\u00e9filement fluide)<\/a>.<\/p>\n
      Note : Petite astuce donn\u00e9e par notre ami Brice<\/a> pour optimiser cette partie du code. Merci \u00e0 lui \ud83d\ude09<\/p>\n
      \u00c9criture du hash dans l’URL<\/h2>\n
      \"Ninja<\/a>C’est bien sympa de proposer un d\u00e9filement au chargement, mais puisque le hash ne s’\u00e9crit plus dans la barre d’adresse, comment allez vous faire pour partager une URL fournie d’un hash ?<\/p>\n
      Il faut le r\u00e9\u00e9crire… oui d’accord, mais comment ?
      \nSi on enl\u00e8ve le return false;<\/code> en fin de fonction, le d\u00e9filement va sauter, puis d\u00e9filer de mani\u00e8re fluide, ou inversement.<\/p>\n
      Il faut donc le faire une fois l’animation termin\u00e9e !
      \nJe vous l’avez dit dans le pr\u00e9c\u00e9dent tutoriel \u00e0 ce sujet, la fonction       animate()<\/a><\/code> permet l’accueil d’une fonction de callback<\/em>.<\/p>\n
      Nous allons donc cr\u00e9er une fonction au sein du mini plugin vu dans l’ancien article, qui va nous permettre de r\u00e9\u00e9crire le hash dans la barre d’adresse.
      \nLa voici :<\/p>\n
      function write_hash(the_hash) {\r\n\t    document.location.hash = the_hash;\r\n}\r\n<\/code><\/pre>\n
      Ensuite il faut faire appel \u00e0 cette fonction dans notre plugin dans la partie qui g\u00e8re l’animation :<\/p>\n
      $('html, body').animate({  \r\n        scrollTop:$(the_element).offset().top  \r\n}, speed, function() {\r\n        write_hash(the_hash);\r\n}); <\/code><\/pre>\n
      Au final, nous avons un code complet qui nous donne :<\/p>\n
      (function($) {  \r\n\t$.fn.juizScrollTo = function( speed ) { \r\n\t\tif ( !speed ) var speed = 'slow';  \r\n \t\t\t\r\n\t\t\/\/ coeur du plugin\r\n\t\treturn this.each( function() {  \r\n\t\t\t$(this).live('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 \r\n\t\t\t\tif ( the_hash.match(\"\\#(.+)\") ) {  \r\n\t\t\t\t\tthe_hash = the_hash.replace(regex,\"$2\");  \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\t\t\t\t\tif ( goscroll ) {  \r\n\t\t\t\t\t\t$('html,body').animate( {  \r\n\t\t\t\t\t\t\tscrollTop: $(the_element).offset().top  \r\n\t\t\t\t\t\t}, speed, function() {\r\n\t\t\t\t\t\t\ttab_n_focus(the_hash)\r\n\t\t\t\t\t\t\twrite_hash(the_hash);\r\n\t\t\t\t\t\t});  \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\t\t\r\n\t\t\/\/ fonctions\r\n \t\t\t\r\n\t\t\/\/ \u00e9criture du hash\r\n\t\tfunction write_hash( the_hash ) {\r\n\t\t\tdocument.location.hash =  the_hash;\r\n\t\t}\r\n \t\t\t\r\n\t\t\/\/ accessibilit\u00e9 au clavier\r\n\t\tfunction tab_n_focus( the_hash ) {  \r\n\t\t\t$(the_hash).attr('tabindex','0').focus().removeAttr('tabindex');  \r\n\t\t}\r\n \r\n\t};  \r\n \t\t\r\n\t\/\/ appel de la fonction sur toutes les ancres !\r\n\t$('a').juizScrollTo('slow');\r\n \t\t\r\n\t\/\/ fonction de slide au chargement\r\n\tfunction trigger_click_for_slide() {\r\n\t\tvar the_hash = document.location.hash;\r\n\t\tif ( the_hash )\r\n\t\t\t$('a[href~=\"'+the_hash+'\"]').trigger('click');\r\n\t}\r\n\ttrigger_click_for_slide();\r\n \r\n})(jQuery)<\/code><\/pre>\n
      Avec les versions de jQuery sup\u00e9rieure \u00e0 1.7.0, favorisez l’utilisation de on()<\/a><\/code> en lieu et place de live()<\/a><\/code>. Regardez bien la documentation pour effectuer les petits changements ad\u00e9quats.<\/p>\n
      Voil\u00e0… je crois que nous avons un code plut\u00f4t complet pour ce type d’effet :<\/p>\n