Dans ce tutoriel vidéo nous verront comment mettre en place un scrolling animé sur tous les liens menant vers des ancres. Pour cela nous utiliserons la librairie jQuery qui nous permettra de gérer les évènements à associer aux liens...
Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.
Dans ce tutoriel vidéo vous apprendrez comment utiliser le plugin...
Dans ce tutoriel vidéo vous apprendrez à créer un système de décompte...
Johayeux Il y a 27 jours Répondre
Moi ça ne marche pas non plus et j'en suis qu'au début :'(
Voila mon code :
$(document).ready(function(){
$(" a [ href^=# ] ").click(function(){
alert("kqzodijzoq");
});
});
ça marche quand je mets l'alert pour voir si le document est bien chargé. Donc ça vient pas de l'import.
legolois Il y a 2 mois Répondre
ben j'ai le même problème que 'newslmdb'
ca ne marche pas en essayant de bidouiller non plus
$(document).ready(function(){
$('a[href^=#]').click(function(){
cible=$(this).attr('href');
if($(cible).length>=1){
hauteur=$(cible).offset().top;
}
else{
hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
}
$('html,body').animate({scrollTop:hauteur},1000,'easeOutQuint');
return false,
});
});
voici mon code il me semble que c'est le même
version jquery:v1.7.1
Date: Mon Nov 21 21:11:03 2011 -0500
c'est peut etre une mise a jour de jquery qui fais planter ce script je sais pas
merci de votre aide
contactez moi sur mon e-mail si vous le souhaitez : leroyjeremy13@gmail.com
newslmdb Il y a 4 mois Répondre
Bonjour, je comprends pas pourquoi moi ça ne marche pas ,
voici mon code:
$(document).ready(function(){
$('a[href^=#]').click(function() {
cible=$(this).attr('href');
if($(cible).length>=1){
hauteur=$(cible).offset().top;
}
else {
hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
}
$('html,body').animate({scrollTop:hauteur},1000,'easeOutQuint');
return false;
});
});
Shokz Il y a 8 mois Répondre
Hello, pour commencer, merci pour le tuto.
J'ignore si je vais avoir une réponse alors que le tuto date d'il y a 2 ans, mais j'ai un problème... Quelque soit le moment où je me trouve dans le tuto, la valeur de la hauteur retournée est 0, et pourtant, après des vérifications, j'ai exactement le même code, une idée ?
Shokz Il y a 8 mois - Répondre
J'ai toujours pas trouvé ma solution, mais en tout cas, pour ceux qui veulent, une petit lien ou il y a un script du même genre : http://www.agent-seo.com/web-design/jquery-scrolling-effect/
sofun Il y a 9 mois Répondre
Merci pour ce tuto ^^
Daniel2a Il y a 9 mois Répondre
Juste dire bravo très bon turoriel et surtout très bien expliqué
freddy Il y a 1 an Répondre
merci du temps passé à partager
gurzil Il y a 1 an Répondre
Salut, encore merci pour tes tutoriels très bien détaillés et très pédagogique, par contre j'ai tenté de faire fonctionner le tutoriel du scrolling à l'intérieur d'une page qui serait affiché dans une zoombox. Et également, à l'intérieur de cette page html j'utilise plusieurs div imbriquées les unes aux autres. Crois-tu que le script ne fonctionne pas à cause du offset ? j'ai tenté de faire des alert() mais aucune ne fonctionne. Pourtant j'ai d'autres fichiers JavaScript qui fonctionne bien à l'intérieur de la zoombox.
inviter Il y a 1 an Répondre
Je suis dans le même cas que toi je voudrait aussi l’intégré au cms de joomla j'ai essayer mais sans succé
Dan Il y a 1 an Répondre
Tout d'abord merci pour le partage! J'ai pas encore essayé de reproduire ce script mais j'en suis impatient, c'est exactement ce que je recherchais... Par contre est-ce que qqun sait si ce script est supporté par les différents cms? Wordpress, Joomla!...? Mon envie serait de le poser sur Joomla, car je connais mieux mais vu la logique du CMS je vois déjà plein de problème à l'horizon... Alors avant de m'arracher tous les cheveux de la tête j'aurais aimé savoir si certains d'entre vous ont déjà testé l'expérience...
Merci d'avance!
Pimeko Il y a 1 an Répondre
Salut ! Merci pour ta vidéo, c'est génial !
Ce serait pas mal que tu mettes en "fichier joint" les fichiers .js, tous faits quoi
pierrot Il y a 1 an Répondre
Bonjour
Oui très bien ce tuto, mais je n'arrive pas à avoir le meme effet quand le lien vient d'une page extérieur. C'est a dire , dans le cas ou le lien se trouve sur une autre page que celle qui contient l'ancre.
href"page.php#ancre"
J'ai vu qu'une personne à relever ce point, mais je n'ai pas eu de réponse
houba Il y a 1 an Répondre
Simple et efficace !
Merci !
Halldev Il y a 1 an Répondre
génial ce tuto, j'ai appris quelque chose de plus. mErci
dark joker Il y a 2 ans Répondre
Super tuto pour un effet sobre mais très apprécié :-)
Merci à toi de nous avoir fait partagé ce comportement.
Nynox Il y a 2 ans Répondre
Bon tuto bien expliqué, par contre je me permet d'ajouter une précision sur la fonction substr() de javascript. Le second paramètre est optionnel et il prendra la longueur du reste de la chaîne s'il n'est pas précisé. Autrement dit, dans ce cas un cible.substr(1) devrait suffire.
Cf: http://www.w3schools.com/jsref/jsref_substr.asp
Superfla Il y a 2 ans Répondre
Bonjour,
Petit problème, l'effet easinOut pour le scroll ne fonctionne qu'après avoir remonté le scroll manuellement, c'est à dire il va bien sur mon ancre mais sans effet puis je remonte mon scroll manuellement , je reclick et la l'effet fonctionne ! Vous aves une piste ?
Merci
A+
Typhon Il y a 2 ans Répondre
J'essaie de récupérer la hauteur de l'élément encré à chaque fois avec:
contentHeight = $('a[name='+cible.substr(1,cible.length-1)+']').height;
mais sa ne marche pas ='( sa me retourne sa:
function (f) {
var e = this[0];
if (!e) {
return f == null ? null : this;
}
if (c.isFunction(f)) {
return this.each(function (j) {var i = c(this);i[d](f.call(this, j, i[d]()));});
}
return "scrollTo" in e && e.document ? e.document.compatMode === "CSS1Compat" &&
e.document.documentElement["client" + b] ||
e.document.body["client" + b] : e.nodeType === 9 ? Math.max(e.documentElement["client" + b], e.body["scroll" + b], e.documentElement["scroll" + b], e.body["offset" + b], e.documentElement["offset" + b]) : f === w ? c.css(e, d) : this.css(d, typeof f === "string" ? f : f + "px");
}
En faite je veux centré l'élément encré lors du clique sur le lien qui y emmène, je récupère la hauteur de la fenêtre et de l'élément encré, après j'ai plus qu'a faire la valeur 'hauteur-windowHeight+contentHeight' pour scrollTop et sa me centrera l'élément dans la page, j'ai tester avec les valeur pour mon écran sa marche, mais mas fonction ne me retourne pas la hauteur du contenue et tout foire ='(
Tu pourrais m'aidé ?
Typhon Il y a 2 ans - Répondre
Je me suis trompé dans mes explication x) là hauteur du div et de la fenêtre j'y divise par deux après :P
Enfin bref j'ai fait sa:
contentHeight = document.getElementById(''+cible.substr(1,cible.length-1)+'').clientHeight;
et sa marche xD merci quand même
maintenant la fonction me centre l'objet que je vais visité dans la fenêtre :P
M@tt Il y a 2 ans Répondre
Merci pour ce petit tuto vraiment simple et qui marche niquel!
Seul petit problème mozilla m'affiche un problème au niveau du CSS à cause du script mais je ne trouve pas d'où celà provient.
L'erreur qu'il m'affiche est:
Erreur CSS: Identifiant ou chaîne pour la valeur attendu dans un sélecteur d'attribu, mais "#" trouvé.
Mon code:
$(document).ready(function () {
$('a[href^=#]').click(function(){
cible=$(this).attr('href');
if($(cible).length>=1){
hauteur=$(cible).offset().top;
}
else{
hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
}
$('html,body').animate({scrollTop:hauteur},1500,'easeOutQuint');
return false;
});
});
Mes ancres:
<a class="lienhaut" href="#top">Haut de page</a>
qui envoi vers une ancre <a name="top"></a> située juste en dessous de ma balise body
Merci! ^^
SuperMarco Il y a 2 ans Répondre
j'avais la tête ailleurs... le callback fonctionne parfaitement !
Pour ceux que ça intéresse :
$('html,body').animate({scrollTop:chiffre},1200,'easeOutQuint',function(){
// Votre code ici..
});
SuperMarco Il y a 2 ans Répondre
Super tutorial comme d'habitude !!!
Mais... je voudrais ajouter un callback à la fin du scroll et je ne trouve pas la syntaxe exacte.
J'ai déjà essayé de mettre un callback dans la fonction animate mais ça ne marche pas : $('html,body').animate({scrollTop:chiffre},1200,'easeOutQuint',callback); => le callback s'effectue tout de suite.
Je voudrais un callback après le easing. En clair, je voudrais qu'une autre animation débute après que la première soit totalement terminée.
Pourriez-vous m'adier ? Merci d'avance.
plop Il y a 2 ans Répondre
non ben finalement tout est rentré dans l'ordre après un éclair de génie (ou plutôt d'un oublie ^^) il suffisait de rajouter div après html,body !
plop Il y a 2 ans Répondre
bonjour bonjour !!!
Voilà j'ai suivi nombre de tes très bon tuto mais la je bloque sur celui là ! Je pense que cela vient plus de l'organisation de ma page ! En effet, je désire faire cela dans un div et je pense que tout le problème vient de là ! Aurais tu une petite astuce ou un truc pour que cela fonctionne ou bien il faut que je cherche autre chose car il me semble que les ancres ne marche pas a l'intérieur d'un div ou je m'y prend mal !
bonne journée ! et merci d'avance !
angeltom Il y a 2 ans Répondre
Bonjour,
Je cherche à savoir pourquoi lorsque je rajoute une ancre cible à un lien ayant des parametres ( ex : <a href="?param1=m1¶m2=m2#top">mon lien</a>), celui-ci ne fonctionne plus ?
Merci de votre aide à toutes et à tous
Vivien Cormier Il y a 2 ans Répondre
Merci beaucoup pour ton tuto !
Maintenant j'ai un beau PortFolio avec scroll animé !
Que demander de plus ?
http://www.viviencormier.fr/
figueline Il y a 2 ans Répondre
Bonjour,
Petite question,
Pour remonter nous utilisons entre autres, le "scrollTop", si l'on souhaite aller de haut en bas... que devons-nous utiliser ?
Le principe est le même, j'imagine.
Merci
figueline Il y a 2 ans Répondre
Merci pour tout...
J'ai appliqué à la lettre le tuto... malheureusement, cela ne fonctionne pas... Aucune animation !!
J'ai pourtant tout vérifié... mais en vain... Je ne sais plus :
Voici le code :
$ (document) .ready(function() {
$ ('a[href^=#]') .click(function() {
cible=$ (this) .attr('href');
if($ (cible) .length>=1) {
hauteur=$ (cible) .offset() .top;
}
else{
hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset() .top;
}
$('html,body').animate({scrollTop:hauteur},1000,'easeOutQuint');
return false;
});
});
Merci de votre aide.
Badbart Il y a 2 ans
C'est marrant dans le tuto je suis persuader qu'il y a pas les espaces après les $ et avant les .
figueline Il y a 2 ans
Pourtant, j'ai bien regardé... ou alors... je suis mirotte !
Je vais réessayer !
figueline Il y a 2 ans - Répondre
J'ai enfin trouvé ! Tout fonctionne à merveille... Encore merci pour ce tuto.
cruchovic Il y a 2 ans Répondre
Salut les gens,
j'ai un soucis que je n'arrive pas à résoudre... je fait donc appel à votre aide pour m'aiguiller.
Alors j'ai une page .html toute prête avec une div(attribut overflow) qui contient une tartine de texte est d'images à laquelle j'aurais voulu appliquer ce petit scroll animé.
Cette div est imbriquée dans une div "parent" elle même dans une autre div... etc elle est en bout de chaine dans une petite boite quoi.
Cette page html est déjà liée à d'autres fichiers javascript et à jQuery... je lui ai donc rajouté un lien vers mon nouveau fichier scroll.js.
Je contrôle en faisant une petite alerte... ça fonctionne !
Je passe à la deuxième étape en attribuant à mon lien de pied de div une alerte pour m'assurer que mon code récupère bien l'attribut # et la ça ne fonctionne plus... l'alerte ne se déclenche pas mais mon bloc remonte bien jusqu'à l'ancre nommée en question !?
Quelqu'un serait-il pourquoi le code n'arrive pas à récupérer l'attribut # ?
Existe-t-il une alternative ?
Le problème pourrait il venir du fait que ma div soit "en bout de chaine" ? Peut-être est-ce le fait d'utiliser une fonction overflow(CSS) ?
merci d'avance !
voici les fonctions css d'overflow que j'utilise:
overflow: hidden;
overflow: scroll;
overflow: auto;
et le code js:
$(doument).ready(function(){
$('a[href^=#]').click(function(){
alert("azerty");
});
});
NecPlusUltra Il y a 2 ans Répondre
Merci pour ce petit tutoriel !
Ça marche nickel !
@BORK
Il y plusieurs fautes de frappe:
- if($(cible).length>=1) et non if($(cible).lenght>=1), tu as inversé le t et le h...
-easeOutQuint et non easOutQuint.
Kromack Il y a 2 ans Répondre
Super tutoriel merci !
Sarathai Il y a 2 ans Répondre
Salut
c'est là qu'est l'erreur, enfin je crois... : cible=$(this)attr('href');
Tu as oublié le point avant "attr" : cible=$(this).attr('href');
BORK Il y a 2 ans Répondre
Bonjours !
voila moi sa na marche pas du tout :/
au débus je faisais tout les alert et sa fonctioner !
puis quand il fallais faire l'alert pour avoir la hauteur sa ne marcher plus même avec l'astuce dites dans le tuto :s
et donc à la fin sa ne marche pas du coup :s
voici le code :/
$(document).ready(function(){
$('a[href^=#]').click(function(){
cible=$(this)attr('href');
if($(cible).lenght>=1){
hauteur=$(cible).offset().top;
}
else{
hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
}
$('html,body').animate({ScrollTop:hauteur},1000,easOutQuint);
return false;
});
});
si vous trouver une erreur je vous en remercie car moi je cherche désespérément :/
etho2.0 Il y a 2 ans Répondre
Bonjour, et tout d'abord merci pour ton tuto excellent !
J'aimerai utiliser ton effet de scroll pour naviguer dans la page à partir d'un menu de type form select, est-ce possible ? Et comment (si tu en as une idée...) ?
Merci d'avance !
Jaco Il y a 2 ans Répondre
Salut, je voulais savoir si on pouvait faire un scrolling sur une autre page .
Exemple( je met un lien sur la page , avec un titre de news par exemple et quand je clique dessus sa me renvoie sur une nouvelle page avec un scrolling sur l'article souhaiter) est-ce possible ??
Grafikart Il y a 2 ans - Répondre
Il faudrait un peu modifier le code pour le charger dès le début du chargement de fichier, détecter le lien et éxécuter le scroll. J'ai pas essayer mais c'est faisable.
anonym Il y a 2 ans Répondre
c'est n'imp l'explication , et le lien pour télécharger est ou ?
FLF Labs Il y a 3 ans Répondre
Je souhaiterai savoir comment changer la vitesse de défilement de la page svp ?
FLF Labs Il y a 3 ans Répondre
Merci bien !
LadyLain Il y a 3 ans Répondre
Salut Grafikart !
Alors deja merci car ce tutoriel etait en partie ce que je recherchais ! ca m'a permis aussi de comprendre certaines choses en javascript cependant ton script m'a posé un leger probleme !
En effet, au moment du clic pour descendre ma page par exemple, celle ci affiche le haut (tres vite) et descend jusqu'a la div ! ce qui pose un certain probleme !
j'ai donc cherché sur le net et suis tombé sur "<a href="http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/ " >df Smooth Scroll</a>" ! l'inconvenient de celui ci est de scroller la page entre different lien ayant un name ! donc c'est pas forcement genant ! son principal avantage est qu'il a l'air de n'avoir ni besoin de jquery ni de mootools ! ou alors je ne l'ai pas vu ^^
Funnycat Il y a 3 ans Répondre
Vraiment extra ce tutoriel. Merci beaucoup il m'a bien aidé.
ifarouk Il y a 3 ans Répondre
Merci et encore merci
Céline Il y a 3 ans Répondre
Un grand merci depuis le temps que je cherchais à réaliser cette effet!!! Ne connaissant pas grand chose au JavaScript ton tuto a été pour moi très clair et "jQuery" quel merveille!!!
Très Bon pédagogue,
Merci
pilou Il y a 3 ans Répondre
À quand une démo pour les tutos ?
Dimix Il y a 3 ans Répondre
Tutoriel super bien présenter comme d'habitude et merci beaucoup
weezy Il y a 3 ans Répondre
Grand grand grand merci pour ce cette vidéo,
je ne pensais vraiment pas que c'était si simple.
Ceci me sera d'une grande aide.
Merci encore
Bergou Il y a 3 ans Répondre
Super effet, je ne pensais pas que ce soit aussi simple à réaliser !
Merci beaucoup.
lifywar Il y a 3 ans Répondre
nice tuto
par contre....
j'essai de l'intégrer au site que je suis en train de concevoir et j'ai un problème parce que j'utilise déjà un menu accordéon et un lightbox(j'ai bien voulu intégrer votre zoombox que je trouve très classe mais les deux ne rentre en cohésion)... je crois que c'est un peu le même problème qui lorsque je veux ajouter l'effet de scroll
greg Il y a 3 ans Répondre
Cool le tuto...
J'ai essayer de le mettre sous wordpress.
Je n'ai pas utilisé les librairies par défault de wordpress
Fonctionne pas...
peut étre que ça vient du :
"$('html,body').animate({scrollTop:hauteur},1000,'easeOutQuint'"
j'ai essayer en mettant php à la place du html..
Marche pas..si t'as une idée ..
Bonne continuation
Grafikart Il y a 3 ans Répondre
@coco: C'est un module que j'ai réalisé en javascript : http://grafikart.fr/zoombox . Il est facil à installer et à utiliser.
coco Il y a 3 ans Répondre
Moi, j'aimerais savoir comment on fair l'efet de page avec le voil noir qui apparait quand on clique sur le lien de Shin (deux postes plus haut). Est ce qu'il y a un tuto quelques part pour ca ?
Cordialement
GoldenBoy Il y a 3 ans Répondre
Merci pour le lien Shin
Shin Il y a 3 ans Répondre
Pour le tutoriel de creation de panier, celui ci est extrêmement bien réalisé :
Voilà pour le lien : http://jcrozier.developpez.com/articles/web/panier/
Mais bon i lest vrai qu'un tutoriel vidéo n'est en rien comparable à un tuto écrit ^^
GoldenBoy Il y a 3 ans Répondre
Salut
Je voulais savoir si tu avais l'intention de faire un tuto sur la conception d'un panier (ou si tu a un lien vers un bon tuto je suis preneur).
Merci.
GhostKiller Il y a 3 ans Répondre
Il met impossible de télécharger la video, même avec d'autre pc. Tellement instable que le fichier deviens corrompus
Serait il possible que tu l'envoi sur MegaUpload ou un autre genre ?
Merci
Babou Il y a 3 ans Répondre
Tient au passage j'en profite pour te demander quelque chose de rapide, quand tu va dans tes documents, tu fais un clique droit et après tu va dans "nouveau" et là tu as des types de fichier comme document texte, mais j'ai vu cher toi que tu avais aussi la possibilité de créer des fichier .php ou .html et .css, c'est assez pratique et rapide, et j'aimerai savoir comment régler c'est paramètres
Ps : J'suis sous vista ^^
Merci.
Bye.
Shin Il y a 3 ans Répondre
Super Tuto Jojo,
Je m'étais précédement renseigné sur ce genre d'animations, pour gérer justement des ancres, mais j'ai coincé lorsque l'utilisation des dites ancres se fait sur une page différente.
Il apparaissait à ce moment que l'animation ne marchait plus =/
Aurait-tu une astuce pour palier à ce problème ? As-tu déjà essayé et réussi ? =)
Merci d'avance ^^
lazy Il y a 3 ans Répondre
Merci à toi pour ce tuto, c'est nikel.
fraize Il y a 3 ans Répondre
et un super tuto de plus pour grafikart, un !
Babou Il y a 3 ans Répondre
Merci Grafikart pour ce tuto, cela faisait longtemps que je voyais des sites avec ce genre d'animation et je me demandais comment il faisait, donc j'espère que cela va me servir et j'en doute pas une seconde
Encore merci pour ce super tuto !
Bye.
Grafikart Il y a 3 ans Répondre
@Stephane : Merci pour le lien, très intéressant et pratique !
Stephane Il y a 3 ans Répondre
Merci, ton tutoriel est très bien expliqué.
Dans ton code jQuery, il est également possible de remplacer "if($(cible).length>=1)" par "if($(cible))".
J'ai essayé et ça fonctionne aussi. jQuery exécutera la suite que si $(cible) existe en fait. Dis moi si je me trompe.
Je viens de trouver cet article très intéressant sur les raccourcis possibles en jQuery : http://haineault.com/blog/84/
lyes Il y a 3 ans Répondre
Je ne dis rien d'autre que merci !
Zeldjian Il y a 3 ans Répondre
Merci c'est très intéressant
Harry Il y a 3 ans Répondre
Encore un super tuto, un peu plus dur j'avoue mais qui reste quand même superbe. C'est cool de pouvoir réaliser des choses qu'il y a sur ton site !
Merci !
Harry
GoldenBoy Il y a 3 ans Répondre
Toujours aussi bien, Merci.
Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.
bisdidine Il y a 21 jours Répondre
Un très bon tutoriel, la question que je me pose comment peut réalisé un scrollbar des images contenant des liens ver des articles sur un blog wordpress sous forme d’animation