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");
if (the_id === '#') {
return;
}
$('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
.
Les lignes juste après vérifient que le lien ne soit pas juste un hash vide qui mènerait nulle part.(merci Rodolphe pour le complément)
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.
Il existe une mise à jour
- jQuery – Effet smooth scroll (défilement fluide)
- [Mise à jour] jQuery – Effet smoothscroll au chargement de la page
Jolie trouvaille, l’effet est vraiment sympa je trouve 🙂
@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 ! 🙂
Waouh !! j’ai sauté comme un bébé ! tellement je suis content apres quelques jours de galere ! Merci beaucoup tuteur
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.
Vraiment belle effet, merci pour le tuto
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
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 »
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_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.
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)
Bonsoir,
J’ai peur de ne pas trop comprendre le contexte dans lequel tu souhaites utiliser ce script…
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 !
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.
pour jquery 1.9 :
jQuery.browser = {}; jQuery.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
if (jQuery.browser.webkit) container = ‘body’;
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!
Merci infiniment pour ce tuto.
Je cherchais en vain à faire cohabiter foundation de Zurb et Smooth Scrolling, et là, le miracle.
Nickel ce code merci
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.
AAAAAA
Merci beaucoup. Je vous adores
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
Petite erreur de ma part j’ai bien un message dans la console:
« Uncaught TypeError: Cannot read property ‘webkit’ of undefined »
Hello,
Si tu avais pris le temps (environ 5 minutes de plus) de lire la suite tu aurais pu trouver l’information 🙂
http://www.creativejuiz.fr/blog/tutoriels/mise-jour-jquery-effet-smoothscroll-au-chargement-page
Bonne lecture et bon courage.
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 :
Il y a pas mal d’autres techniques, dont des plus courtes/natives, mais merci pour le partage 🙂
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.
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.
Bonjour !
Merci tout d’abord pour ce script 🙂
j’ai juste un petit souci, et je n’ai pas trouvé la reponse dans les commentaires précédents.
pour faire simple, j’ai un header en fixed en haut de page et quand j’utilise le scroll avec ou sans ton script sur une ancre, il me met le debut de mon div appelé en dessous mon header….
y’aurait-il un moyen avec ton script de baisser le « top » de la page ??? pour que mon ancre arrive au dessous du header ??
j’ai essayé de changer « body » de cette ligne
if ( $.browser.webkit ) container = ‘body’;
mais du coup ca ne marche plus 😉
merci d’avance, et bon dimanche !
Bonjour,
C’est à la ligne 30 que ça se passe.
scrollTop:$(the_element).offset().top
peut être modifié ainsi :
scrollTop:$(the_element).offset().top - 45
pour créer un décalage. Cette valeur peut aussi être positive ( « + 45 » par exemple).
Bon courage.
Merci beaucoup de ta réponse rapide !
malheuresement ca ne marche pas, je n’ai aucun décalage….
j’ai essayé avec de grandes valeurs en +et – pour tester, mais rien n’y fait…
j’ai meme essayer avec des parentheses, histoire de… pareil, ca ne marche pas…
j’avasi déjà vu cette ligne et avait fait des tests non concluants… je ne sais pas pourquoi ca ne marche pas, j’avoue…
Si c bon marche 😉
en fait c’est le probleme du fixed… si je mets ma div en « relative », ca marche…
donc, je vais essayer de revoir le css pour que ce soit plus simple !
merci encore,
Salut,
Est-ce que l’on peut appliquer ce procéder sur un menu horizontal, qui appel une autre page, donc un site qui’ n’est pas en one page ?
Je ne sais pas si je suis bien clair !
Hello,
Cette technique permet de défiler dans une même page. Elle n’a en théorie pas lieu d’être si vous avez besoin de changer de page.
Autrement comme précisé en fin d’article, il y a également une mise à jour de l’article pour proposer un défilement fluide au chargement de la page.
Bonne lecture 🙂
Bonjour,
Merci pour la réponse.
J’ai une question concernant l’effet qui monte, j’ai trouvé un effet similaire:
http://www.synapse-fr.com/correcteur_orthographe_grammaire.htm
Ensuite cliquer sur « j’achète », à droite.
Est-ce possible de faire l’effet pour un site à plusieurs pages, avec un effet vertical, car dans le lien donné ci-dessus l’effet est horizontal ?
Cordialement
Bonjour Dan,
Il s’agit d’un bloc (volet) qui passe par dessus le contenu de la page. Il n’y a ici aucun scroll.
Il s’agit donc ici du développement d’un autre type de script.
Bonne journée,
Geoffrey
Bonjour,
Merci pour la réponse, je suis un peu ennuyant mais je ne suis pas un expert dans le domaine.
Est-ce possible d’intégrer ce script à un site à plusieurs page ?
Ou puis-je trouver ce genre de script ?
Je suis un peu lourd et je m’en excuse, mais je suis vraiment nul dans ce domaine.
Cordialement,
Bonsoir,
Navré mais je pense qu’il va vous falloir développer ce script ou faire des recherches plus poussées sur la toile. Je n’ai pas de nom de plugin ou de ressource en tête.
Bon courage.
Super ce petit tuto ! C’est ce que je cherchais ! Merci 😉
Bonjour à tous, j’ai essayé de suivre au mieux tous les conseils du tuto, mais rien n’y fait, le code JS ne fonctionne pas. Je ne suis pas expert en code, et la majeure partie de ce code provient de Photoshop suite à un découpage en tranche.
Si quelqu’un pouvait m’aider, ce serait top! Merci !
Marvin
Bonjour Marvin,
J’imagine que vous êtes peu attentif également ?
Au-dessus du formulaire que vous avez rempli, il y a deux messages qui peuvent m’aider à vous aider. Si vous ne faites pas cet effort, votre code ne passera pas la validation, et je ne ferai pas plus d’effort que vous n’en faites.
Merci pour votre compréhension.
Bonjour
J’ai une question. Comment faire sur wordpress pour modifier l’endroit où le scroll va s’arrêter ? Car j’ai une petite barre de menu qui suit l’utilisateur en haut de page et du coup cela cache systématiquement chaque lien pointé vers l’ancre.
Je m’explique, si j’ai des par exemple comme ceci :
titre 1
titre 2
titre 3
titre 4
titre 5
Et que je fais pointer un lien vers une ancre que j’aurais placé avant le titre 1 et bien je peux être sûr que lorsque je clique dessus je vais juste voir le titre 3 en haut de page. :/
Du coup, j’aimerais baisser l’endroit où cela s’affiche (le scrool) d’au moins 30px pour que ce soit pratique pour les utilisateurs.
ps : J’ai tinymce installé et je crois qu’il a son propre système d’ancre, je sais pas si c’est utile de le préciser mais sait-on jamais comme je cherche désespérément à modifier cet affichage.
Merci à qui me donnera la réponse. 🙂
Bonjour Léo,
Lorsque tu lis un article, prend toujours le temps de lire également les commentaires. Cela peut te donner des pistes.
Pour ta question, la réponse s’y trouve un peu plus haut sur la page.
Excellente journée à toi.
Merci pour ta réponse Goeffrey, je ne la vois que maintenant car je n’ai pas eu de notification de réponse.
Cependant, j’avais trouvé la réponse par moi-même en testant.
A vrai dire, comme il y a deux cent cinquante mille commentaire sous le post, à peu près personne ne les lira tous. 😉
Bonjour Léo,
Merci pour ta réponse.
Un peu de respect pour le travail d’autrui ne ferait pas de mal. De deux choses l’une, lorsque tu poses une question dans un espace public et que tu trouves la solution, il serait bien venu de la proposer à cet espace public. Effet ce n’est pas parce que tu n’as pas eu d’aide ou de réponse tout de suite, que personne ne s’est creusé la tête pour toi.
De deux, tu sous-entends que c’est donc à moi de passer du temps à répondre (parfois en doublon) à chaque commentaire, alors que j’ai déjà passé du temps à écrire bénévolement cet article, plutôt qu’à toi de parcourir les commentaires de l’article ? C’est clairement déplacé : c’est toi qui a un problème avec ton code, pas moi, c’est à toi de faire les efforts pour le résoudre.
Dans tous les cas, bonne continuation 😉
Bonjour,
tip-top le script smoothscroll, j’ai utilisé la version de base ^^(celle tout en haut), par contre quand mon site s’affiche, il démarre en plein milieu de la page, et pas en haut… Problème d’ancre de mon côté?
Julien
Bonsoir Julien,
Impossible de vous répondre sans connaître votre code. Une page de démo en ligne serait la bienvenue. (comme précisé dans l’une des deux alertes juste avant le formulaire de commentaire)
Merci.
Oula veuillez m’excuser, j’ai effectivement lu très vite (voire pas lu du tout ^^), l’adresse du site est maintenant dispo… J’ai essayé sans le script smoothscroll, et le problème demeure, cela vient donc d’autre chose. Si vous avez une piste, je suis preneur, et j’arrêterais de vous embêter sur cette page qui ne concerne même pas mon soucis :p !! Pour codepen, j’essaierais incessamment sous peu.
Julien
Hello,
Pas de souci, ça arrive, disons que c’est plus rapide pour toi si j’ai toutes les informations tout de suite 😉
Je pense que le problème vient du loader, mais ton script me semble pourtant très simple. Peut-être simplement une histoire de positionnement.
Étant en vacances je n’ai pas le temps de regarder plus loin, navré.
Bon courage !
Bonjour,
J’ai une petite question je souhaite laisser mon menu sous ma bannière mais que quand je descend avec la souris le menu se fixe en haut, je sais que cela est possible mais j’ai cherché sur internet et je n’est rien trouvé. Est-ce que vous pouvez m’aider ou pas ?
Merci dans tous les cas et bonne continuation !
Bonjour Laura,
Je vous invite à surveiller de près les prochains articles, l’un d’eux devrait parler de ce sujet en utilisant jQuery 🙂
Bonne continuation.
Bonjour Geoffrey,
Je suis votre blog depuis longtemps (tous les jours je jette un oeil) et depuis très loin (asie du sud-est).
Je vous félicite d’ailleurs pour la qualité globale de vos articles.
J’aurais une petite question sur un souci que je cherche à résoudre depuis 2 jours déjà:
Lorsque l’on passe en FullScreen les pages se décalent et malgré tous mes essais, je ne parviens pas à corriger se problème.
Le problème est visible sur votre démo d’ailleurs.
Lorsque l’on active votre démo, en pressant F11 pour passer en FS tout en étant sur la page « middle » un décalage se créé au sommet (là où se trouvait la barre du navigateur) au moment du passage en FS.
Qu’en pensez-vous? Et avez-vous une idée sur la façon dont on peut régler ce problème?
Merci et bon week-end à vous ainsi qu’à tous.
Hello Eric,
Merci pour ton retour.
J’ai mis à jour la démo (graphiquement et techniquement) en ajoutant un exemple de code pour le support du fullscreen.
J’ai eu du mal à trouver plus simple et qui fonctionne.
En gros à chaque clic sur un lien, j’ajoute une classe « last-target » sur la cible. Puis si jamais en cours de temps on passe à du fullscreen, je repère quel était le dernier élément ciblé, et je glisse à nouveau vers lui en 200 ms.
Je te laisse regarder le code source de la démo ?
Merci à toi.
Quelle réactivité!
Merci mille fois Geoffrey pour votre réponse très très très rapide.
Je venais jeter un coup d’oeil juste pour voir avant d’aller au dodo.
Ici (01h10 local en Thaïlande) donc j’ai ommencé à regarder mais si je ne m’arrête pas maintenant je ne vais pas dormir… Donc je vais me coucher et j’étudie tout ça avec attention dès demain matin.
Un grand merci et bon samedi soir à vous… Si un jour vous passez dans le coin… (Je reviens demain!)
Bon, je reviens plus vite que prévu…
Euh, d’abord j’ai tout de même ré-essayé sur mon navigateur (ff 42) et j’ai constaté le même souci, càd que si je suis sur « middle » et que j’appuie sur F11, un décalage apparait.
Là, je me suis dit « t’as un pépin avec le cache du navigateur » donc tu verras ça demain tranquillement.
Puis j’ai pensé « aller, 1 minute ne changeras rien donc essaie sur un navigateur où je n’ai pas fait tourner ta démo » et j’ai essayé sur Vivaldi (moteur webkit) et là, j’ai constaté à ma grande surprise toujours un décalage en haut du navigateur.
Et comme il ne peut pas y avoir de trace de ta démo (bon je vous tutoie) dans Vivaldi puisque je n’ai jamais testé ta démo sur ce navigateur… Je commence à m’y perdre…
C’est vrai que j’ai bu une petite bière (p’tet 2, voir 3) mais tout de même j’ai un doute.
Bon je regarde demain à tête reposée.
Bonne soirée à vous et attention à la bière…
Bonjour Geoffrey et bonjour à tous,
Je reviens après une bonne nuit salvatrice…
Je ne vois pas le code source de la démo.
J’ai bien essayé de télécharger « Plugin jQuery scrollTo » mais ça ne passe pas, la page web est inaccessible?
Sinon, je précise que le décalage n’apparait que dans un cas de figure précis:
– c’est toujours sur la page du milieu « middle » (d’ailleurs si il y avait plusieurs pages dans la démo le phénomène se produirait sur toutes les pages sauf la première et la dernière)
– le problème ne survient qu’une seule fois (mais survient tout de même). Dès lors que l’on scroll vers le haut ou le bas tout se repositionne.
Merci à toi ainsi qu’à tous et bon dimanche.