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
- jQuery - Effet smooth scroll (défilement fluide)
- [Mise à jour] jQuery - Effet smoothscroll au chargement de la page
Liens utiles
Jolie trouvaille, l’effet est vraiment sympa je trouve
Vraiment belle effet, merci pour le tuto
@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 !
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.
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
iddes 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 »
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
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_prevet.juiz_nextpour les commandes,.juiz_steppour chaque point d’arrêt du défilement, et.juiz_current_stepqui 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.
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 !
je signale juste une petite erreur
Erreur ligne 12
hash -> « the_hash » pour éviter erreur JS
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
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:)))
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.
merci pour la rapidité de la réponse:))))
malheureusement le projet sur lequel je travaille n’est pas en ligne:(((((
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
non pas de souci merci pour ta proposition:)))
où puis-je trouver ton mail ?
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
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.
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!
« 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…
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 ?
une : http://www.el-be.fr/beta/home/contact.php
autre : http://www.el-be.fr/beta/home/portfolio.php
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.
zut j’avais mis des protections dans le mauvais dossier
tu peux y aller maintenant ^^
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
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
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
Bon courage !
Bonjour, je trouve ce tutoriel super.
Je me demandais… est-il possible de l’intégrer dans mon blog blogger ?
Si oui, comment ?
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 !
Parfait
Merci pour ton retour d’utilisation.
(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 =)
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
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
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 :
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…
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 …
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 ?
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.
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
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é.
Je comprends tout à fait, pas de problème =)
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
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
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 ?
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).
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.
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 !
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
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)
Re,
J’ai reçu ton mail. Cela confirme l’idée de j’avais en tête, il faut :
Normalement ça devrait le faire ainsi…
Facile comme ça, il ne reste plus qu’à coder !
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
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
@Jojo : j’espère que ma méthode qui consiste à ne pas donner la solution (sous forme de code) te convient
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
J’ai cru remarquer que ça fonctionne plutôt bien sur ton site. Que veux-tu changer ?
Bonne soirée à vous !
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 !
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ènementkeydown()tout en utilisantpreventDefault()lorsque c’est bien une touche fléchée qui est activée- 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
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
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.
Bonjour,
Je n’ai jamais expérimenté la chose, mais je pense qu’il faut regarder de ce côté :
History JS
Bonne continuation
Merci je vais regarder ca.;)
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 !
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.
Merci
Tu dois créer une version anglaise aussi. S’il vous plaît excusez mon français.
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.
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 !
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.
Juste pour te dire merci.
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 !
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.
Merci de ta prompte réponse.
Je te fais un mail pour t’expliquer.
Merci pour ce super article, tu viens de me faire gagner un temps précieux
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
Bonjour,
Je pense qu’il va falloir vous amuser avec la propriété
.scrollLeft()au lieu de.scrollTop().Je vous laisse chercher un peu ?
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.
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.
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
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
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
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.
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.
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.
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)
Hello,
juste pour info, ton script ne marche plus avec la dernière version de jQuery
Je regarderai ça à mon retour de vacances, mais ça ne doit pas être grand chose
Merci !
Bonsoir,
J’ai peur de ne pas trop comprendre le contexte dans lequel tu souhaites utiliser ce script…
Génial le tutoriel, je n’ai pas l’habitude d’utiliser cet effet dans mes projets.
Grâce à toi je peux maintenant.
Génial Jeff
Merci pour ton retour.