Il peut être pratique de se déplacer dans une page de votre site en cliquant sur un bouton ou un lien, voire dans un menu, qui amène directement à un point donné de la page courante ou d’une autre page du site courant. C’est particulièrement intéressant si le contenu de votre page est long et que vous voulez éviter de pénibles scrolls à travers la page.
Pour ce faire, nous allons commencer par la fin : nous devons définir la cible que nous souhaitons atteindre en cliquant sur notre lien. Puis, vous l'avez deviné, nous terminerons par le commencement en créant le lien qui nous mènera vers la cible visée.
D’une façon générale, on place une ancre, soit par la définition d’un élément <i> (ou <span>) vide auquel on attribue un identifiant :
<i id="nom-de-l-ancre"></i>
ou, si votre éthique vous interdit d’utiliser une ancre vide, vous pouvez placer le lien dans la balise, comme suit :
<p id="nom-de-l-ancre">Mon texte</p>
Évidemment, perspicace comme vous l'êtes vous avez compris qu'il ne fallait pas recopier tels quels “nom-de-l-ancre” et “Mon texte”.
L’autre possibilité, la plus intéressante pour les utilisateurs inconditionnels d’Oxygen que nous sommes : en utilisant l’id de la section-cible. Pour cela, il faut cliquer dans l’éditeur Oxygen sur la section-cible, et relever l’id de la section que l’on trouve dans le panneau gauche, dans notre cas c’est :
div_block-59-241
Ce lien peut revêtir plusieurs formes : cela peut être un bouton, un lien texte classique ou même un lien de menu.
https://mon_site.com/#div_block-59-241
Sauvegardez et ça marche.
Commencez par sélectionner le texte puis :
Pour un élément de menu, il faut sortir d’Oxygen et se rendre dans le menu de WordPress, rubrique “Apparence” puis “Menus”.
Là, il faut :
Voilà, ça y est, vous avez jeté l’ancre et elle est parfaitement fonctionnelle.
Mais quelque chose vous titille encore...
Comme vous êtes un être raffiné qui attache une importance primordiale à l’esthétique de son site web, vous aimeriez que la transition du lien à l’objectif d’icelui se fasse de façon progressive et agréable à l’œil.
Oxygen Builder a pensé à vous et a caché une option de “smooth scrolling” — “défilement fluide” pour les académiciens qui fréquenteraient ce blog — qui va vous faire rire de plaisir :
Et voilà, vos transitions se font par un défilement progressif du plus bel effet.
Vous voilà en possession d'une ancre qui ne partira pas à la dérive, mille sabords !
Pierre Maitre
https://www.infomaster.fr
Bonjour Pierre,
merci pour ce tuto très clair... Et si je souhaite faire un lien propre?:
https://mon_site.com/#div_block-59-241 >>> https://mon_site.com/monlienpropre
J'ai fait beaucoup d'essai mais je reste sans solution...
Henri
Merci Pierre pour l'astuce 😉 Un problème récurent, qui doit être (je pense) dû au décalage de la hauteur du header, ou de son type de positionnement (relative, absolute etc...), fait que ce lien vers une ID tombe souvent trop haut, et est du coup masqué par le header. L'astuce consiste alors à mettre son ID sur un élément au dessus de celui ciblé, ou de jouer sur le margin ou padding, mais ce n'est pas très pratique, si quelqu'un a une astuce plus propre je suis intéressé 😉