jQuery – Effet smooth scroll (défilement fluide)

Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci

L’effet de scroll fluide est déjà intégré, en fonction de vos paramètres utilisateur, sur certains navigateurs. Il se manifeste par un défilement fluide de la page web lorsque vous descendez ou montez grâce à la molette de votre souris, ou les touches de votre clavier. Il est possible de générer cet effet au clic sur une ancre grâce à JavaScript.

Il y a quelques temps de cela (peut-être trois ans maintenant) j’avais trouvé un script JS pour ajouter cet effet, mais celui-ci ne prenait en compte que les ancres dotées de l’attribut name, sous cette forme :

<a href="#cible">Aller à "cible"</a>
<!-- plus loin dans la page -->
<a name="cible"></a>

Or la création d’un élément anchor dans le seul but de créer une ancre ne me semblait pas la méthode la plus propre, mais comme j’étais une quiche en JavaScript (ça n’a pas trop changé d’ailleurs, puisque j’utilise principalement jQuery pour me faciliter l’existence), j’ai fait avec ce code jusqu’à ce que je découvre jQuery et le plugin jQuery.scrollTo().
Plugin plutôt efficace, mais très lourd pour la petite utilisation que j’en faisais.

C’est pourquoi aujourd’hui je vous propose de créer votre propre script jQuery de smoothscroll.
Voici une petite démonstration sommaire :
Effet smoothscroll.

Solution de base

NB : les codes JavaScript qui vont suivre sont à placer après l’appel à la bibliothèque jQuery, fait sous cette forme, par exemple :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- votre script ici -->
</script>

Dans le cadre d’une utilisation simple des ancres, votre code HTML doit ressembler à peu près à cela :

<a href="#contact">Contact</a>
<!-- plus loin dans la page -->
<h2 id="contact">Contact</h2>

On a donc simplement un href portant une # (dièse) suivie de la valeur de l’id (unique, mais inutile de le rappeler… hein ?) ciblé.

On aurait donc un script jQuery dans ce goût là :

$('a[href^="#"]').click(function(){
	var the_id = $(this).attr("href");

	$('html, body').animate({
		scrollTop:$(the_id).offset().top
	}, 'slow');
	return false;
});

Au click sur un lien dont l’attribut href commence (^=) par #, j’enregistre la valeur de son attribut href ($(this).attr("href")) dans la variable the_id.
Puis je fais une animation (animate()) qui consiste à scroller (scrollTop) vers le haut de l’élément ciblé ($(the_id).offset().top), lentement (slow).
return false; permet d’éviter le comportement normal lors de l’évènement de clic sur le lien (à savoir le saut vers l’ancre et son affichage dans l’url).

La présence du sélecteur $('html, body') permet de corriger un bogue sur Webkit (Chrome et Safari) qui ne semble comprendre qu’une animation sur l’élément body

Prévoir les autres cas de figure, et créer une fonction

Voilà mais…, peut-être que vous allez vouloir créer une fonction identique pour un système qui mélange id et name, ou que vous avez l’intention de distribuer généreusement un script passe-partout à vos visiteurs.

Pour cela il faut prévoir l’exception que nous connaissons, le code va donc être plus long.
Je vous le présente, nous allons le détailler après :

function juizScrollTo(element){			
	$(element).click(function(){
		var goscroll = false;
		var the_hash = $(this).attr("href");
		var regex = new RegExp("\#(.*)","gi");
		var the_element = '';
 
		if(the_hash.match("\#(.+)")) {
			the_hash = the_hash.replace(regex,"$1");
 
			if($("#"+the_hash).length>0) {
				the_element = "#" + the_hash;
				goscroll = true;
			}
			else if($("a[name=" + the_hash + "]").length>0) {
				the_element = "a[name=" + the_hash + "]";
				goscroll = true;
			}
 
			if(goscroll) {
				$('html, body').animate({
					scrollTop:$(the_element).offset().top
				}, 'slow');
				return false;
			}
		}
	});					
};
juizScrollTo('a[href^="#"]');

Pour résumer simplement, nous allons exécuter notre animation de tout à l’heure (ici lignes 22 à 25) dans la seule condition que notre variable goscroll soit ok (true).
Notre problématique est la suivante : nous savons que l’utilisateur va cliquer sur un lien ayant un attribut href commençant par #, mais nous ne savons pas s’il faut le mener vers l’élément porteur de l’attribut correspondant name ou id.

On va donc dans un premier temps faire un simple contrôle en cherchant une dièse dans l’attribut href (l.8), si on trouve la dièse on récupère la valeur se trouvant juste après (l.9) grâce à la RegExp préparée l.6. Une fois qu’on a la chaîne en question, on va pouvoir chercher un élément porteur de l’id ou du name correspondant à cette chaîne.

Il faut bien commencer par l’un ou par l’autre, j’ai choisi de commencer par l’id (lignes 13 à 14). Il suffit de compter le nombre de "#notre_chaine", si on en a au moins 1 (on ne devrait en avoir qu’un !) alors on est bien en recherche d’un id, si on en a pas, alors on compte le nombre de a porteur de l’attribut name de valeur "notre_chaine". (lignes 15 à 18)

Dans cette étape, nous sommes censés valider l’une ou l’autre des situations, nous récupèrerons donc forcément une valeur de la variable hash, et nous passerons notre variable goscroll à true pour effectuer l’animation.
S’il nous arrivait de ne vérifier ni l’une ni l’autre des conditions (ni id, ni name), alors le visiteur verra la page sauter vers le haut, puisque votre lien semble renvoyer vers une ancre inexistante.

Pour rendre effectif le fonctionnement de la fonction, il ne reste plus qu’à en faire l’appel en précisant les a concernés. (ligne 29)

Personnellement, j’ai encore un peu de mal avec notre sélecteur sur html et body, l’animation ne s’exécute-t-elle pas deux fois simultanément ?
Même si ça marche, ce n’est pas très propre.
Dans l’étape d’après, nous allons ajouter un contrôle, puisque nous savons que la spécificité se trouve sur webkit.

Création d’une extension de jQuery

Cette partie du tutoriel est un peu plus complexe, mais vous permettra de créer une fonction d’extension à la bibliothèque jQuery.
Cette fonction vous permettra d’ajouter des paramètres et de chaîner avec d’autres fonctions jQuery.

Voyons le code de plus près :

(function($){
	$.fn.juizScrollTo = function(speed){
		if(!speed) var speed = 'slow';
 			
		return this.each(function(){
			$(this).click(function(){
				var goscroll = false;
				var the_hash = $(this).attr("href");
				var regex = new RegExp("(.*)\#(.*)","gi");
				var the_element = '';
 
				if(the_hash.match("\#(.+)")) {
 
					the_hash = the_hash.replace(regex,"$2");
 
					if($("#"+the_hash).length>0) {
						the_element = "#" + the_hash;
						goscroll = true;
					}
					else if($("a[name=" + the_hash + "]").length>0) {
						the_element = "a[name=" + the_hash + "]";
						goscroll = true;
					}
 						
					if(goscroll) {
						var container = 'html';
						if ($.browser.webkit) container = 'body';
 
						$(container).animate({
							scrollTop:$(the_element).offset().top
						}, speed);
						return false;
					}
				}
			});
		});
	};
})(jQuery)
 	
$('a[href^="#"]').juizScrollTo('fast').css('color','red');

Comme vous pouvez le voir en dernière ligne de ce code, l’appel à la fonction se fait différemment et propose une possibilité de chaînage et de paramétrage.

	$.fn.juizScrollTo = function(speed){
	};

Pour obtenir ce résultat, nous créons l’extension grâce à la ligne 2 où les informations importantes figurent (le nom de la fonction et les paramètres) sous cette forme :
$.fn.nom_de_fonction = function(parametre1,parametre2).

		if(!speed) var speed = 'slow';

La ligne d’après nous permet de vérifier si le paramètre speed a été renseigné, s’il ne la pas été nous attribuons une valeur par défaut.
Il est possible d’utiliser la fonction extend() pour attribuer un plus grand nombre de paramètres par défaut, cette méthode est plus lisible, mais pour l’exemple nous en resterons à cette manière de procéder.

		return this.each(function(){
		});

Nous en sommes à la ligne 5, qui possède une particularité : toutes les occurrences (each()) de this sont retournées. C’est cette partie qui nous permet de chaîner (l.36). En retournant this (l’élément sur lequel influe notre fonction) nous pouvons le récupérer et le tripatouiller avec une autre fonction :)
Si notre fonction avait pour but de retourner une valeur autre que l’élément ciblé, le chaînage ne serait plus possible.

		$(this).click(function(){
		});

Nous entrons ici dans le gestionnaire d’événement dont nous avons vu dans les étapes précédentes.
Le script reste donc quasiment identique, c’est pourquoi je vais m’attarder sur les quelques changements uniquement.

var container = 'html';  
if ($.browser.webkit) container = 'body'; 

Nous créons la variable container qui aura pour valeur html par défaut, ou body si jamais on détecte une navigation sous Webkit.
Je vous en avais parlé avant, ça nous permet d’effectuer une animation en ne ciblant que l’un des deux éléments.
Il suffit ensuite de remplacer notre ancien sélecteur par la variable (ligne 30).

}, speed);

Sur cette ligne 31 du code, nous avons renseigné notre variable speed, qui correspond anciennement à la valeur "slow".
L’utilisateur de la fonction peut donc aisément y renseigner une valeur de son choix.

Pitite conclusion

Pour ceux qui sont arrivés au bout de ce tutoriel, je vous dis bravo !
En espérant que votre fonction fonctionne à merveille, n’hésitez pas à compléter, corriger ou critiquer ce tutoriel via les commentaires, ou mon formulaire de contact pour les timides.

Il est possible d’aller encore plus loin pour les fondus de jQuery. Par exemple, la fonction animate() peut accueillir une fonction de callback. C’est une fonction qui est appelée une fois l’animation terminée. Vous pouvez donc ajouter en paramètre de la fonction que nous venons de créer, une possibilité de personnaliser la fonction de callback.

Je vous laisse y réfléchir…

Allez, enjoy ! ;)

Bonux

Après publication de cet article (il y a 20 minutes), je me suis rendu compte que la navigation au clavier n’était pas aisée. En effet, une fois la touche Entrée pressée sur un des liens, l’effet de scroll s’effectue, mais le focus n’est pas donné à l’élément ciblé, et pour cause : il ne possède pas de tabindex (dans mon cas, c’est une div).
La solution consiste à passer en fonction de callback de la fonction animate() la fonction suivante :

function(){
$(the_hash).attr('tabindex','0').focus().removeAttr('tabindex');
}

Elle permet d’ajouter un tabindex de valeur 0 (permet d’offrir la possibilité de porter le focus à un élément sans casser l’ordre de tabulation), attribuer le focus, puis retirer le tabindex aussitôt pour ne pas nous retrouver avec des effets de bord.
Je ne sais pas ce que ça vaut en terme d’accessibilité, mais ça semble rendre bien plus aisée la navigation au clavier.
A vous de voir sur la page de démonstration.

Cet article a été étendu sur cette mise à jour. Allez y jeter un œil ;)

Il existe une mise à jour

  1. jQuery – Effet smooth scroll (défilement fluide)

101 commentaires et 3 trackbacks sur “jQuery – Effet smooth scroll (défilement fluide)”

  1. Arnaud dit :
    5 septembre 2011

    Jolie trouvaille, l’effet est vraiment sympa je trouve :)

    • Geoffrey dit :
      7 septembre 2011

      @Arnaud : Trouvaille ? J’aurais pas employé ce mot pour qualifié ce tutoriel, mais pourquoi pas. Merci

      @calixweb : je t’en prie

      N’hésitez pas à me faire des retours si vous rencontrez des soucis, ou si vous avez des idées.
      Merci ! :)

      • charaf dit :
        25 mai 2014

        Waouh !! j’ai sauté comme un bébé ! tellement je suis content apres quelques jours de galere ! Merci beaucoup tuteur

      • Salawu dit :
        19 juillet 2014

        Boujour,
        Merci pour l’aide, cependant j ai un soucis.
        je m’explique:
        j ai 2 pages page1 et page2,, le lien pointant vers la page2 se trouve sur la page page1 et est une ancre de ce type : page2.html#titre, voulant appliquer l’effet smooth scroll à cette page2. il ne fonctionne pas. Pouvez vous m’aider, merci d’avance.

  2. calixweb dit :
    6 septembre 2011

    Vraiment belle effet, merci pour le tuto

  3. logan dit :
    16 novembre 2011

    Petite question (problème) que je n’ai pas trouvé sur le net,

    j’ai mis 2 ancres (dans mon « à propos » où je parle de mon parcours et de ma boite) que j’ai nommé top et bottom. J’ai donc mes éléments visuels sur le site :

    <a href="#top" rel="nofollow"> UP </a>
    <a href="#bottom" rel="nofollow"> DOWN</a>

    avec mes 2 « liens »:
    <a></a>
    <a></a>

    que je place respectivement en haut et en bas de ma page. Jusque là rien d’extraordinaire.

    Mon souci est le suivant : j’ai placé entre mes 2 descriptions (moi / ma boite), une div pour télécharger mes CV.
    Quand je suis en haut de ma page je ne vois pas cette div (trop basse dans la page), donc je fais un scroll down avec ma petite flèche mais là Hop ! ma page défile vers le bas et ma div CV n’est toujours pas accessible (trop haute dans la page ce coup-ci ! Donc soit trop basse soit trop haute dans la page mon téléchargement n’est pas accessible sur les petites résolutions.

    Mon idées… est-ce possible toujours avec ce joli petit effet de smooth scroll, de garder seulement mes 2 images « flèches up/down » mais de mettre 3 ancres (top/middle/bottom) et de faire en sorte que lorsque je clique sur la flèche down mon scroll aille à l’ancre suivante et lorsque je clique sur la flèche UP mon scroll aille à l’ancre précédente. Le tout sans se soucier du nom de ces ancres). J’espère que j’ai été claire :)
    Pour résumer :
    2 flèches (UP/DOWN) visibles pour l’internaute, et ces flèches permettent de naviguer entre les # suivantes et précédentes. de cette façon j’aurai accès au téléchargement de mes CV :)
    Merci pour votre aide.

  4. Geoffrey dit :
    16 novembre 2011

    Bonsoir Logan,

    Je me permets de te tutoyer, tu peux faire de même :)

    Je vais te donner une réponse frustrante (dans l’immédiat) : oui c’est possible, mais je ne peux pas te donner une réponse ou un code simplement.
    Il me faudrait un contexte plus précis, car plusieurs solutions sont envisageables.

    L’une d’elles consisterait à récupérer, avec jQuery, les id des blocs vers lesquels scroller, les stocker dans un tableau, et créer un mini système de pagination, en ne proposant que deux liens : UP (= scroll-1), DOWN (= scroll+1).
    Cette méthode te permettrait de construire dynamiquement le cheminement sur les différents blocs de ton site en rajoutant simplement les blocs les un en dessous des autres, peu importe leur nombre au final.

    Tu me suis ?

    Mais en fonction de la structure réelle de ta page, la solution n’est peut-être pas la plus adaptée.

    Tu peux me contacter en privé si tu as quelques chose à me montrer en ligne, sinon tu peux aussi m’envoyer la structure de base de ton code HTML que je jette un œil.

    Par contre je préfère te dire tout de suite que si je vois que ça risque de demander trop de temps de réflexion, je risque de ne pas pouvoir t’apporter plus d’aide que la piste que je viens de donner. Hélas je suis pas mal pris en ce moment.

    À plus tard ;)

    PS : très belle « page en construction »

  5. logan dit :
    17 novembre 2011

    Super Geoffrey ! merci beaucoup pour ton aide. Mon site est très simple ( je suis un pur graphiste à la base ). Je t’envoie le lien en question pour que tu vois ce dont je parle :)

  6. Geoffrey dit :
    19 novembre 2011

    Bonsoir Logan,

    Voici le fruit des quelques minutes de travail que j’ai pu t’accorder.

    http://creativejuiz.fr/blog/doc/test-smoothscroll-bystep.html

    Il s’agit en fait d’une grossière reprise de mon document de travail pour cet article.
    J’ai ajouté des classes sur chacune des divisions frères qui servent d’étapes pour le défilement par étape.

    Je te laisse analyser le code ?

    Les classes clefs sont .juiz_prev et .juiz_next pour les commandes, .juiz_step pour chaque point d’arrêt du défilement, et .juiz_current_step qui est une classe dynamique permettant de savoir où on se trouve.

    Tu peux bien entendu reprendre et modifier ce code, du moment que tu ne t’en attribues pas le travail ;)

    J’espère que ça répond à ton problème.
    Bon week-end.

  7. logan dit :
    20 novembre 2011

    Hey super merci je regarde ça de suite :) ! Pour ce qui est de l’attribution du travail, tu sais très bien ce que j’en penses (cf mon mail). Je respecte le travail fournis par chacun et tout travailleur mérite reconnaissance ;)

    Merci encore Mr C !

  8. Pierre dit :
    17 décembre 2011

    je signale juste une petite erreur

    Erreur ligne 12
    hash -> « the_hash » pour éviter erreur JS

    • Geoffrey dit :
      17 décembre 2011

      Bonsoir Pierre,

      Merci pour cette correction :)
      J’avais changé de nom de variable pour éviter d’avoir un nom identique à location.hash, et j’ai malencontreusement laissé des traces de l’ancien nom :s

  9. Ryo dit :
    2 février 2012

    hello,

    merci pour le tutoriel, j’ai essayé d’intégrer le script dans sa version basique, il fonctionne:)

    Simplement, sur ma page où plusieurs « blocs » s’enchaînent, le scroll fait juste apparaître le titre de la partie où je souhaite scroller et une partie du bloc du dessus reste visible.

    Comme s’il y avait une notion de hauteur de contenu qui empêche d’aller « complètement » au bloc souhaité et donc ne laissé rien apparaître au dessus.

    C’est pas très clair non ????

    Enfin si quelqu’un a une idée je suis preneur:)))

    • Geoffrey dit :
      2 février 2012

      Bonjour,

      Il est possible d’inclure une gestion du décalage du scroll, mais le mieux serait de déboguer à la source plutôt que de corriger.
      Le mieux serait d’avoir une page en ligne pour pouvoir déboguer ça en live :)

      Merci.

  10. Ryo dit :
    2 février 2012

    merci pour la rapidité de la réponse:))))

    malheureusement le projet sur lequel je travaille n’est pas en ligne:(((((

    • Geoffrey dit :
      2 février 2012

      Peut-être une possibilité de me l’envoyer par mail ?
      Je ne mords pas, mais je comprendrais parfaitement la réticence à me fournir les sources d’un projet ;)

  11. Ryo dit :
    2 février 2012

    non pas de souci merci pour ta proposition:)))

    où puis-je trouver ton mail ?

  12. Sami dit :
    3 mars 2012

    Salut, merci pour le tuto !
    Petit souci quand je clique sur le lien pour le scroll je n’ai pas de défilement « doux », je me retrouve directe à l’endroit voulu.
    Comment y remédier ?

    Merci

    • Geoffrey dit :
      3 mars 2012

      Bonjour Sami,

      Cela peut être dû à pas mal de choses différentes.
      Il faut vérifier si tu cibles bien les bons liens. Ensuite il ne faut pas oublier le return false;. Puis si jamais il y a une erreur de syntaxe dans le code, toute la portion de JAvaScript peut ne pas s’exécuter.

      Si tu utilises Firefox couplé au plugin Firebug, regarde dans l’onglet script si tu n’a pas un message d’erreur en rouge ;)

      Bon week-end.

  13. Sami dit :
    3 mars 2012

    Merci pour la réponse.
    J’ai vérifier avec le plugin mais je n’ai rien remarquer d’anormale, par contre j’ai copier le script de ta page d’exemple et cela fonctionne bien. Par contre le script est carrément plus lourde!

    • Geoffrey dit :
      4 mars 2012

      « Carrément plus lourde » ? C’est à dire ?
      Quel était ton script initial ? Je t’avoue que je suis dans le flou là, tu ne me donnes aucun exemple…

  14. logan dit :
    4 mars 2012

    Salut Geoffrey !

    J’utilise smoothscroll sur 2 de mes pas et sur une il est bien interprété mais sur l’autre, il ne passe pas.

    Tu ne saurais pas pourquoi ?

    • Geoffrey dit :
      4 mars 2012

      Salut Logan.

      Impossible de vérifier, tu as protégé l’accès semble-t-il.

      Tu as mon mail je crois ;)
      Bonne soirée.

  15. logan dit :
    5 mars 2012

    zut j’avais mis des protections dans le mauvais dossier :) tu peux y aller maintenant ^^

    • Geoffrey dit :
      5 mars 2012

      Hello,
      Il semblerait que « $ » ne soit pas défini. C’est mon pote Firebug qui me le signale, peut-être qu’en déclarant jQuery avant le script qui utilise l’entité « $ » ça ira mieux :)
      Beau design ;)

  16. bourgoin dit :
    5 mars 2012

    Arf la buse ! lol j’avais modifié mon head sans faire gaffe (et surtout sans regarder sur Firebug avant, je développe sous chrome et l’outils debbug n’est pas aussi complet).

    Merci en tout cas pour ton p’tit coup de main toujours appréciable !

    et merci pour ton commentaire :)

  17. bourgoin dit :
    5 mars 2012

    il ne me reste plus qu’à faire en sorte que le comportement au clic soit idem quand j’utilise mes touches pour naviguer dans le portfolio :)

  18. Mathilde dit :
    7 mars 2012

    Bonjour, je trouve ce tutoriel super.
    Je me demandais… est-il possible de l’intégrer dans mon blog blogger ?
    Si oui, comment ?

  19. Mathilde dit :
    7 mars 2012

    Finalement j’ai réussi !
    Ca donne ça:

    http://the-wandering-girl.blogspot.com/p/index-des-recettes-sucrees-par-ordre.html

    Merci beaucoup pour ce tuto !

  20. Mathilde dit :
    8 mars 2012

    (re)Bonjour,

    Je cherche un moyen, dans blogger, de mettre un lien « post précédent » et « post suivant » qui scroll au post correspondant dans mon blog en fonction de l’endroit où le visiteur se trouve sur la page.

    C’est un peu le même principe qu’ici sauf que l’endroit d’arrivé n’est pas fixe, il s’agit d’un endroit sur le blog relatif aux autres posts.
    J’ai essayé de faire ce tutoriel : http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery qui correspond exactement à ce que je voudrais, mais je n’arrive pas à l’incorporer correctement à mon code HTML.
    Pourtant j’ai pu incorporer un lien « back to top » facilement.

    Mes connaissances sont plutôt limitées en HTML/Javascript/Jquery aussi, il faut bien le dire.

    Bref, si vous avez une solution en tête, ça m’aiderait =)

    • Geoffrey dit :
      9 mars 2012

      Bonsoir Mathilde,

      Dans mon commentaire de novembre 2011 je propose le script suivant :
      http://creativejuiz.fr/blog/doc/test-smoothscroll-bystep.html

      Je ne sais pas si le code source est suffisamment compréhensible.
      Si ce n’est pas le cas il me faudra connaître le lien de ton site pour analyser rapidement le code source pour te donner des pistes.

      Merci

  21. Mathilde dit :
    9 mars 2012

    Je viens de parcourir rapidement le code source de cette page, le problème c’est que ça ne marche pas sous google chrome, la démo beug, et puis j’ai beaucoup plus de mal à comprendre le script – c’est un peu du chinois pour moi – le code source de cette démo : http://www.webdesignerwall.com/demo/scrollto-demo/ me paraît plus clair, je comprend mieux…

    Mais je n’arrive toujours pas à comprendre pourquoi je ne peux pas le faire marcher dans mon blog : http://www.the-wandering-girl.blogspot.com

    En tout cas merci pour la réponse précédente, c’est tout de même sympa d’avoir quelqu’un qui répond ENFIN à vos questions, même s’il n’y a pas de solution

  22. Geoffrey dit :
    9 mars 2012

    Hello,

    La démo que tu me présentes bloque la possibilité de revenir sur les posts une fois le lien « comments » cliqué ?… Bizarre.
    Ce script charge également le plugin scrollTo, ce qui n’est pas forcément justifié pour un si petit script. (ça fait un peu « bazooka pour tuer une mouche »)

    Pour que l’un de ces deux scripts (le mien ou celui de ta démo) puisse fonctionner, il va falloir revoir la structure de la liste d’articles de ton blog (je ne sais pas si tu peux le faire). En effet il faudrait que chaque post appartienne à une division bien à lui, et que chaque division se suivent.

    En gros il faudrait un code qui ressemble à cela :

    <div class="a_post" id="id123">…</div>
    <div class="a_post" id="id124">…</div>
    <div class="a_post" id="id125">…</div>

    Autrement ça va considérablement augmenter la difficulté de code à mettre en place.

    Pour information j’ai corrigé mon script sur Chrome, ce navigateur est stupide, il se décide à ne plus maintenir des choses d’une version à l’autre, des choses pourtant très simples parfois.
    Bref…

  23. Mathilde dit :
    9 mars 2012

    Ok je vois, je pense que si je veux modifier ce paramètre, il va falloir que j’ajoute une portion de cote tel que « div id=id233″>… etc à chaque début de nouveau post, ça devrait marcher.

    Mais si je comprends bien il va falloir que je modifie le code source de la démo en fonction de ce que j’aurai choisi comme identifiant pour chaque post …

  24. Mathilde dit :
    9 mars 2012

    J’ai essayé en attribant un id à chaque post en écrivant l’id dans une balise div, mais ça ne marche pas, j’ai le message « vous n’avez pas attribué d’id à votre élémentt », j’ai essayé en écrivant plusieurs class différent dans la balise div avec l’id mais cela ne marche pas non plus.

    Il faudrait alors ajouter un plugin, ou une fonction ou je ne sais quoi dans le code html qui face l’instruction « attribut à chaque post un id= »id123″ et « id123++ » ou quelque chose comme ça, non ?

  25. Geoffrey dit :
    9 mars 2012

    Je ne sais pas ce que blogspot permet de faire au niveau de la modification des templates, mais logiquement l’incrémentation des ID devrait se faire toute seule, peut-être avec une variable de type {post-id}.
    Si tu n’as pas accès à des variables, le script JS à mettre en place va vraiment différer de ma démo.

  26. Mathilde dit :
    9 mars 2012

    je pense que je vais laisser tomber parce que je n’ai aucune idée de comment faire, j’ai pas les connaissances suffisantes pour m’y attaquer je crois.

    J’ai remarqué que tous mes posts étaient identifiés par un attribut name= « des chiffres » dans un élément <a>, mais bon je ne sais pas si ça m’avance à quelque chose et quand bien même je ne sais pas comment

    En tout cas, merci pour tout

  27. Geoffrey dit :
    9 mars 2012

    Oui, c’est une des possibilités pour appliquer le script : utiliser les valeurs des attributs name, mais le code va être complexifié.
    Dans l’immédiat je n’ai pas trop le temps de te faire ça.
    Navré.

  28. Mathilde dit :
    9 mars 2012

    Je comprends tout à fait, pas de problème =)

  29. Marmits dit :
    12 mars 2012

    Hello
    ce serait complet et j’ai un peu de mal à trouver de faire fonctionner ce script également avec l’ascenceur.
    C’est à dire : en déplaçant l’ascenceur, effectuer le défilement fluide sur le hashtag le plus proche … un exemple :
    http://www.scozzese.com

    • Geoffrey dit :
      12 mars 2012

      Hello,
      Merci pour la suggestion, mais c’est sans moi pour le développement de cette idée.
      Je trouve cet effet très contraignant pour la navigation, et super stressant puisqu’il est sans arrêt en train de corriger la position du contenu dans la fenêtre que j’ai moi-même positionné à un endroit pour une raison qui m’appartient, et je ne veux certainement pas qu’on décide pour moi de l’endroit où elle doit se trouver.
      Mais ça n’engage que moi :)

  30. Marmits dit :
    12 mars 2012

    Je ne suis pas sur d’avoir compris ce qui est contraignant …
    La position du contenu ne change pas … l’ascenseur se cale doucement juste sur la bonne section si le défilement à la souris s’arrête …
    Je trouve l’effet très esthétique … et précis.
    Avez vous bien vu l’exemple que j’ai cité ? est ce que cela est si contraignant ?

  31. Geoffrey dit :
    12 mars 2012

    Oui justement, j’ai testé l’exemple, et c’est très gênant, je ne peux simplement pas positionner la fenêtre à l’emplacement où j’estime que mon confort de lecture est le mieux.

    Je dirais même que c’est anti-ergonomique.

    J’ai essayé de placer l’ascenseur où je le souhaite, mais impossible.

    En général sur ce type de site je reste 10 secondes, ou alors je finis par désactiver JavaScript. Mais le visiteur « beta » quittera le site, ou adaptera son comportement en vous reprochant l’effort qu’il aura dû faire pour s’adapter… (sauf si vous vous appelez Facebook, mais c’est un autre problème).

  32. Marmits dit :
    13 mars 2012

    Merci pour ce point de vue …

    Je comprends très bien mais justement le site propose un confort automatique, le contenu s’adapte automatiquement, tout est visible à l’écran, la navigation automatise le rendu …

    De plus, je trouve que le principe est très inspiré d’une animation flash ou justement les rendus graphiques sont très orientés sur l’ergonomie et le design …

    A vrai dire, je suis un peu embarrassé car c’est « mon graphiste » qui est très sensible à ce genre de navigation et c’est une sorte de défi que de pouvoir réaliser quelques choses de semblables avec les dernières techno.

    En fait je trouve que cette fonctionnalité ajouterai quelques choses de plus complet (peut être sous forme d’option)
    par exemple sur une tablette, ça serait sympa comme principe …

    je vais essayé d’ y trouvé une solution … dès que j’ai un peu de temps.

  33. Jojo dit :
    14 mars 2012

    Salut Geoffrey et merci pour ton code ! :) Alors j’ai une question :
    J’ai modifié le code pour que le défilement soit horizontal (donc juste changé le scrollTop en scrollLeft et top par left)

    Et en fait j’aimerai savoir si il était possible de cibler un hash dans un autre ?
    Plus clairement lorsque je suis tout à gauche, j’ai un lien qui m’emmène vers la droite en scroll qui ciblerait à l’arrivée un conteneur div par exemple. En gros une sorte d’ancre double, mais je n’y arrive pas :0 Je pourrais directement ciblé le conteneur, mais du coup il y aurait un décalage et ma page ne serait plus centrée

    Je sais pas si c’est clair ^^ » Merci et bonne journée !

    • Geoffrey dit :
      14 mars 2012

      Bonjour Jojo,

      J’avoue ne pas tout comprendre. Si tu cibles un élément par son ID, tu n’as pas besoin de cibler un élément dans un autre, puisque par définition l’ID est unique sur la page.
      Si tu cibles un éléments par sa classe, ce n’est plus la situation de l’ancre interne comme on l’entend habituellement.

      Pour pouvoir t’aider il me faudrait un exemple de code, voir le problème que ça pose graphiquement ou structurellement.
      Là je suis dans le flou ^^’
      Bonne journée à toi, et bon courage :)

  34. Jojo dit :
    14 mars 2012

    Hey, en fait clairement, j’ai par exemple un slider dans ma page, donc avec plusieurs slide.

    Je suis sur le coté gauche et veut accéder à la droite (là ou il y a mon slider) et cibler exactement le slide n°4. Dans mon slider j’ai activer les link et chaque slide est identifié par un name= »nom_du_slide ».
    J’aimerai que quand je clique, ça me projette vers la droite tout en ouvrant le slide correspondant. Le problème est que je ne peux pas cibler directement le slide car ma page serait excentré.

    Mon slider est par définition centré dans la page et je ne veux pas que lorsque le défilement se fait, le coté gauche du slider(puisque j’appelle un name du slider) se colle à ma fenêtre du navigateur (pour une question d’esthétisme)

    Si nécessaire je t’envois le lien du site (en version d’essai encore) :)

  35. Geoffrey dit :
    14 mars 2012

    Re,

    J’ai reçu ton mail. Cela confirme l’idée de j’avais en tête, il faut :

    • récupérer la largeur de la fenêtre du visiteur
    • soustraire la valeur trouvée à la largeur de chaque slide
    • diviser par deux la différence trouvée et l’ajouter à la valeur de scroll(left) pour créer un décalage

    Normalement ça devrait le faire ainsi… :)

    Facile comme ça, il ne reste plus qu’à coder !

  36. Jojo dit :
    14 mars 2012

    D’accord ! Je vois à peu près après ce que tu veux dire … je vais essayé de coder mais c’est pas gagner :) ! lol

    Par contre j’ai essayé ton code pour repérer les # des href ET des name mais les name ne marchent pas, donc je vais voir sur firebug, mais je te remercie en tout cas pour tes explications !

    Bonne journée

  37. Logan dit :
    14 mars 2012

    voilà ! maintenant moi aussi je veux faire du scroll horizontale c’est malin ! lol…
    je vais regarder si je peux pas mettre le SmoothScroll sur les 4 boutons de mon pad multidirectionnel http://www.el-be.fr/beta/home/portfolio.php (actuellement j’ai SmoothScroll sur haut/bas et un autre js sur left/right [bxSlider]). l’idée serait de faire un pad 100% SmoothScroll…
    Mais Geo je te laisse déjà gérer le problème du m’sieur. Je prends un ticket pour lire tes bons conseils ^^.
    Bon dév les amis :)

  38. Geoffrey dit :
    14 mars 2012

    @Jojo : j’espère que ma méthode qui consiste à ne pas donner la solution (sous forme de code) te convient :D
    La partie de code qui concerne ID et NAME est juste un contrôle pour vérifier si le lien cliqué fait référence à la valeur d’un ID ou d’un NAME. Rien de plus ici.

    @Logan : Ah ah :D
    J’ai cru remarquer que ça fonctionne plutôt bien sur ton site. Que veux-tu changer ?

    Bonne soirée à vous !

  39. Logan dit :
    15 mars 2012

    Arf bah Je sais pas… Si je peux me simplifier la vie en n’utilisant que le SmoothScroll.js sur les boutons du pas. Au lieu de faire appel au js de mon caroussel (bxSlider).
    J’ai fait en sorte que le comportement du pad au clic, soit accessible aussi au clavier (flèches). au clic tout va bien.
    Au clavier ça bloque. J’ai peur que ça rentre en conflit avec le comportement par défaut du navigateur… Apparemment quand j’utilise la flèche bas/haut, la page se baisse directement de name à name, sans effet smooth.
    D’ailleurs je peux remplacer la l’attribut « name » par un autre dans la balise « a » ? (je regarde les tests pour validermon site avec le html validator.

    Bonne soirée m’sieur ! :)

  40. Geoffrey dit :
    15 mars 2012

    Salut Logan,
    Bien sûr que tu peux changer d’attribut.
    Je conseille même de virer le <a> et de cibler l’ID de l’élément vers lequel tu veux pointer.

    Pour la navigation avec les touches directionnelles, ça risque effectivement de rentrer en conflit avec les actions par défaut du navigateur. Il faut prévoir un trigger('click') sur l’évènement keydown() tout en utilisant preventDefault() lorsque c’est bien une touche fléchée qui est activée :)

  41. Logan dit :
    15 mars 2012

    - virer le <a> et cibler l’ID de l’élément… agir sur ton js en somme ? Je sais même pas si j’ai la dernière version de ton SmoothScroll lol faut que je regarde ça… je peux cibler cibler un autre élément genre et ? Tu me conseilles quoi comme solution (la solution la plus W3C correcte).

    – je sèche là. lol

  42. Geoffrey dit :
    15 mars 2012

    D’après ce que j’ai vu tu auras besoin de changer une partie du JS oui.
    Le W3C s’en moque un peu, les deux solutions sont bonnes. J’ai juste tendance à favoriser celle qui n’oblige pas à avoir des éléments qui ne servent à rien dans le document HTML.

    Donc plutôt en ciblant l’ID d’une <div>.

    J’ai pas trop le temps de te proposer un code tout fait pour le moment. Sorry :/ #tropDeBoulot

  43. heppaya dit :
    28 avril 2012

    Bonjour,

    J’aimerais savoir s’il est possible de donner une extension différente a chaque page.
    Je ne sais pas si c’est clair :
    Exemple. menu avec 2 boutons a et b
    Quand on clique sur b, l’extension de la page dans le navigateur change : b.html
    De façon a bien différencier les pages et surtout quand on fait un retour de page dans ie, qu’il ne revienne pas au site précédent.

    Merci d’avance.

    • Geoffrey dit :
      29 avril 2012

      Bonjour,
      Je n’ai jamais expérimenté la chose, mais je pense qu’il faut regarder de ce côté :
      History JS
      Bonne continuation :)

  44. heppaya dit :
    29 avril 2012

    Merci je vais regarder ca.;)

  45. Ronan dit :
    21 septembre 2012

    Hello,

    Avant j’utilisais le Smooth Scrolling de Chris Coyier (http://css-tricks.com/snippets/jquery/smooth-scrolling/) mais je dois dire que d’un point de vue purement esthétique je préfère ta version (pas de # visible dans l’URL) :)

    Merci !

    • Geoffrey dit :
      21 septembre 2012

      Hello,

      Merci :)
      En fait ça dépend de ce qu’on recherche.
      Certains préfèrent avoir le hash en fin d’URL pour pouvoir partager une partie du site, même sur un One Page Layout (qui peut parfois être long).
      C’est pour ça que je propose plusieurs solutions au sein de ces deux articles :)
      Au plaisir.

  46. Ciprian dit :
    4 octobre 2012

    Merci :)

    Tu dois créer une version anglaise aussi. S’il vous plaît excusez mon français.

    • Geoffrey dit :
      5 octobre 2012
      Hi Ciprian,

      Your french is good :)
      You think this article should be translated ?
      I’ll try to think about it for the next version of this blog.
      Thank you for your suggestion.
      Have a nice evening.

  47. Julien dit :
    17 janvier 2013

    Sympa comme idée, je vais peut-être implémenter cela sur mon site dans les semaines à venir. Mais je dois dire qu’il faut faire la part des choses entre le travail que cela représente et l’intérêt réel pour le visiteur. Je n’arrive pas à juger de la différence entre un avec et un sans scroll fluide !

    • Geoffrey dit :
      17 janvier 2013

      Dans l’absolu ça permet de montrer au visiteur où il va dans la page, lorsqu’un saut de page ne permet pas forcément de dire si on est descendu ou monté, ou si on a changé de page en chargeant un contenu AJAX.
      Ensuite cet effet est basique, il est possible de l’utiliser dans des contextes plus complexes, le code présenté est donc sommaire et peut permettre de produire des choses plus riches.

  48. ayile dit :
    25 février 2013

    Juste pour te dire merci.

  49. Anthony dit :
    13 mars 2013

    Salut ! Je début en code, je te demande conseil pour un problème auquel je suis confronté sur un site que je fais pour une amie. Je crois qu’il s’agit d’un conflit jQuery. En fait, quand j’ajoute ton premier script jQuery, ça marche super, mes menus dans ma barre de menus en position:fixed font défiler la page vers la section voulue… sauf que les fonctions du thème WordPress que j’utilise ne marchent plus ! Le thème faisant appel à la fonction ScrollTo, je pense que le problème vient de là. Si tu as le temps de regarder, c’est là : http://www.fabrique-images.fr/. En te remerciant d’avance de ton aide !

    • Geoffrey dit :
      13 mars 2013

      Bonjour Anthony,
      Je ne vois pas de problème sur ton site. Mais si celui-ci fait appel à cette fonction, pourquoi vouloir utiliser mon script ?
      Merci.

  50. Anthony dit :
    13 mars 2013

    Merci de ta prompte réponse. :) Je te fais un mail pour t’expliquer.

  51. code4fun dit :
    21 mars 2013

    Merci pour ce super article, tu viens de me faire gagner un temps précieux ;)

  52. Guillaume dit :
    28 mars 2013

    Bonjour,

    Très bon tuto!! j’ai juste une question, est ce que l’on peut envisager de faire un défilement de droite a gauche car ça serait exactement ce qu’il me faudrait point de vue animation.

    merci

    • Geoffrey dit :
      28 mars 2013

      Bonjour,

      Je pense qu’il va falloir vous amuser avec la propriété .scrollLeft() au lieu de .scrollTop().
      Je vous laisse chercher un peu ? :)

  53. Guillaume dit :
    28 mars 2013

    je viens de passer la matinée dessus et je m’arrache les cheveux le problème est que je suis débutant en html et encore plus nul en js. Avez-vous la possibilité de m’aider, en fait j’ai 3 div qui font 1280px de largeur et je veut juste faire un défilement horizontal un peu sympa. pour l’instant le System fonctionne sans animation juste avec des ancres. je voudrait juste savoir comment adapter mon System au votre en modifiant le sens de défilement.

    Merci

    Bonne fin de journée.

  54. Simon dit :
    3 avril 2013

    Bonjour !
    Merci pour ce tuto, très pratique. J’ai utilisé « la solution de base ».
    Elle marche très bien sur Chrome, Firefox et autres, mais sur IE… Une autre paire de manches. Je m’explique :
    Pour aller à la page voulue, il faut repasser par l’accueil. Si on ne le fait pas, ça remonte ou descend un peu où ça veut. Peut être est-ce une erreur de ma part dans le code ?
    Avez-vous une idée d’où cela peut-il venir ?
    Merci !
    PS : Je ne sais pas comment vous montrer le problème, étant donné que je travaille en local.

    • Geoffrey dit :
      3 avril 2013

      Bonjour,
      Si vous n’avez pas d’hébergeur il est toujours possible d’utiliser google Drive (je crois qu’il le permet maintenant) ou Dropbox pour communiquer un document HTML.
      Bonne journée :)

  55. Jonathan dit :
    9 avril 2013

    Salut,

    ce script est exactement ce qu’il me faut pour ajouter la petite touche qui rendrait la navigation plus agréable sur le site que je suis entrain de faire.

    Cependant en ajoutant le script

    function juizScrollTo(element){  
        $(element).click(function(){  
            var goscroll = false;  
            var the_hash = $(this).attr("href");  
            var regex = new RegExp("\#(.*)","gi");  
            var the_element = '';  
       
            if(the_hash.match("\#(.+)")) {  
                the_hash = the_hash.replace(regex,"$1");  
       
                if($("#"+the_hash).length>0) {  
                    the_element = "#" + the_hash;  
                    goscroll = true;  
                }  
                else if($("a[name=" + the_hash + "]").length>0) {  
                    the_element = "a[name=" + the_hash + "]";  
                    goscroll = true;  
                }  
       
                if(goscroll) {  
                    $('html, body').animate({  
                        scrollTop:$(the_element).offset().top  
                    }, 'slow');  
                    return false;  
                }  
            }  
        });  
    };  
    juizScrollTo('a[href^="#"]');

    en haut de pages entre les liens donné au début du tuto je n’ai toujours pas réussi à créer l’effet smooth.

    Une petite aide serait la bienvenue si tu as le temps ^^

    Le site en question : http://www.headbangerco.ch/doc3

    • Geoffrey dit :
      9 avril 2013

      Hello,

      Je ne vois pas le script inséré dans ton document.
      Pour information tu charges deux versions différentes de jQuery, dont une qui reprend automatiquement la dernière version.
      Si tu veux un environnement stable je te déconseille de charger cette dernière.

      Bon courage.

  56. Jonathan dit :
    9 avril 2013

    J’ai reupload mon site, mais je ne comprends toujours pas où j’ai fais une erreur, je m’arrache les cheveux ^^

    J’ai recréé une page vierge pour voir si j’avais surchargé mon code avec les diverses bibliothèques javascript/jquery, mais ça ne fonctionne pas mieux.

    J’ai mis le code comme suit :

    [Code édité pour modération]

    Dans la balise HEAD.

    Est-ce que je suis passé à côté d’une variable que j’aurais dû modifier ou quelque chose dans ce genre?

    Merci pour toute aide que tu peux m’apporter.

    • Geoffrey dit :
      9 avril 2013

      Le problème est toujours le même, vous chargez deux fois jQuery (ligne 7 et ligne 50 de votre document), il faut ne le charger qu’une seule fois.
      De plus je vous conseille de placer ces scripts en pied de page.
      Enfin ma console Firebug m’indique une erreur sur un autre fichier JS (s.ytimg.com/yts/jsbin/www-embed-vflMawmXz.js), je pense donc que vous ne maitrisez pas les différents scripts insérés dans votre document est qu’il faut commencer par faire un nettoyage.
      Bon courage.

  57. Baptiste dit :
    10 avril 2013

    Salut,
    petite question… j’ai utiliser ton script mais l’effet ne fonctionne pas. Je pense que le problème viens du fait que mon scroll ce trouve dans une div alors que le reste de la page reste tout le temps fixe. A tu une solution stp ?? (je comprend pas)

    • Geoffrey dit :
      15 avril 2013

      Bonsoir,

      J’ai peur de ne pas trop comprendre le contexte dans lequel tu souhaites utiliser ce script…

  58. Ronan dit :
    12 avril 2013

    Hello,

    juste pour info, ton script ne marche plus avec la dernière version de jQuery :)

    • Geoffrey dit :
      15 avril 2013

      Je regarderai ça à mon retour de vacances, mais ça ne doit pas être grand chose ;)
      Merci !

  59. Jeff9600 dit :
    17 mai 2013

    Génial le tutoriel, je n’ai pas l’habitude d’utiliser cet effet dans mes projets.

    Grâce à toi je peux maintenant.

  60. Alexis dit :
    23 mai 2013

    pour jquery 1.9 :
    jQuery.browser = {}; jQuery.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
    if (jQuery.browser.webkit) container = ‘body';

  61. Belg dit :
    3 juin 2013

    Merci beaucoup pour ce petit Tuto très utile !
    Perso j’avais besoin de charger du contenu dans une iframe en #Middle
    pour cela j’utilise :

    <a href="#middle" rel="nofollow">BLA BLA BLA</a>

    puis la iframe en question dans la div « middle »

    ca me permet de libérer la balise pour le scroll
    bye!

  62. Caldeira dit :
    18 juillet 2013

    Merci infiniment pour ce tuto.
    Je cherchais en vain à faire cohabiter foundation de Zurb et Smooth Scrolling, et là, le miracle.

  63. Eric dit :
    28 septembre 2013

    Nickel ce code merci

  64. tyty dit :
    3 octobre 2013

    Bonjour j’ai appliquer la même chose à mon bandeau mais lorsque je suis en haut de page il ne ré apparaît plus ;-)

    $(window).scroll(function(){
    posScroll = $(document).scrollTop();
    if(posScroll >=550) {
    $(‘#bandeau’).fadeIn(600);
    $(‘#menutop’).fadeIn(600);

    }
    else {
    $(‘#bandeau’).fadeOut(600);
    $(‘#menutop’).css({
    ‘top’ : ‘0px’
    });

    }
    });

    autrement le reste est bien le bandeau disparaît et le menu remonte bien.

  65. Tham Nguyen dit :
    12 février 2014

    AAAAAA
    Merci beaucoup. Je vous adores

  66. David dit :
    13 mai 2014

    Salut, Merci pour ce très pratique tutoriel…
    J’ai intégré le script dans mon code, malheureusement it doesn’t work…

    Pas d’erreurs Javascript, Dernière version de JQuery, j’utilise normalize.css mais je pense pas que cela influe sur le processus. j’ai même essayé de tester avec la version 1.8 de JQuery mais rien n’y fait, le scroll est brut, sans effets, de plus, j’ai testé de nombreux codes de SmoothScroll, mais aucun de fonctionne sur mon poste…

    J’utilise Google Chrome, je fais les test en parallèle sur IE9 Javascript autorisé. Mais cela ne fonctionne pas… Je ne veux pas te placer le code ici pour pas pourrir les commentaires mais c’est dommage que ca ne fonctionne plus car niveau référencement tu ressort bien en recherchant « Smooth Scroll »

    A+ merci quand même pour le tuto

  67. Horusw dit :
    14 mai 2014

    Merci, j’ai gagné plusieurs heures grâce à toi Geoffrey. :-)
    J’ai pas vu si c’était déjà dans les comments,
    Pour utiliser $.browser (comme plus haut) qui a été déprécié à partir de jquery1.9,

    Vous pouvez utiliser ceci :

    var matched, browser;
     
    jQuery.uaMatch = function( ua ) {
        ua = ua.toLowerCase();
     
        var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
            /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
            /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
            /(msie) ([\w.]+)/.exec( ua ) ||
            ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
            [];
     
        return {
            browser: match[ 1 ] || "",
            version: match[ 2 ] || "0"
        };
    };
     
    matched = jQuery.uaMatch( navigator.userAgent );
    browser = {};
     
    if ( matched.browser ) {
        browser[ matched.browser ] = true;
        browser.version = matched.version;
    }
     
    // Chrome is Webkit, but Webkit is also Safari.
    if ( browser.chrome ) {
        browser.webkit = true;
    } else if ( browser.webkit ) {
        browser.safari = true;
    }
     
    jQuery.browser = browser;
    • Geoffrey dit :
      14 mai 2014

      Il y a pas mal d’autres techniques, dont des plus courtes/natives, mais merci pour le partage :)

  68. 18 août 2014

    Bonjour, j’ai fais mon site web avec webaccapella et leurs manières de mettre des ancrages est un peut trop Old School. J’aurai aimé y intégrer ce tutoriel mais je ne sais pas comment faire avec mon logiciel -_- ..

    Je vous file le site de mon logiciel si vous voulez tester http://www.webacappella.fr.

    • Geoffrey dit :
      19 août 2014

      Bonjour,
      Merci pour ces informations, cependant je ne peux pas me permettre de tester tous les logiciels utilisés par mes lecteurs pour les comparer et solutionner leur désuétude. (je parle des logiciels)

      Par contre la plupart de ces logiciels permettent d’intervenir directement dans le code source pour l’éditer.
      Peut-être qu’une courte description du code généré pourrait m’aider à vous aider :)

      Merci et bonne journée.

Laisser un commentaire

Certains codes HTML ne sont pas échappés automatiquement. Pour afficher du code dans votre commentaire, merci d'échapper vos chevrons en utilisant "&lt;" et "&gt;" en lieu et place de "<"" et ">".

Il est difficile de proposer un support pour tous les articles de ce blog. En ne fournissant pas un moyen de consulter votre code bogué, vous vous assurez de ne pas avoir de réponse adaptée. Utilisez CodePen.io à défaut d'une page web.

Les sites qui en parlent

 
Le studio web