Ajouter une ancre pour se déplacer à l’intérieur d’une page

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éfinir la cible

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

Créer un lien vers la cible

Ce lien peut revêtir plusieurs formes : cela peut être un bouton, un lien texte classique ou même un lien de menu.

Pour un bouton, c’est tout simple :

1. sélectionnez le bouton qui vous intéresse ;
2. dans la partie gauche de l’éditeur, dans la case "URL" sélectionnez ou tapez l’url de la page suivie d’un slash, du hashtag et de l’id de l’ancre :
   https://mon_site.com/#div_block-59-241

Sauvegardez et ça marche.

Pour un lien texte :

Commencez par sélectionner le texte puis :

1. cliquez sur l’icône de lien dans la barre horizontale supérieure ;
2. saisissez la même url que précédemment dans la fenêtre qui apparaît.

Pour un élément de menu :

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 :

1. sélectionner le menu à modifier ;
2. cliquer sur “Liens personnalisés” et saisir la même url que ci-dessus ainsi que le libellé souhaité ;
3. cliquer sur le bouton “Ajouter au menu” ;
4. enfin, cliquer sur “Enregistrer le menu”.

Voilà, ça y est, vous avez jeté l’ancre et elle est parfaitement fonctionnelle.

Mais quelque chose vous titille encore...

Un peu de raffinement…

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 :

1. ouvrez la page dans Oxygen
2. Cliquez en haut à droite sur “Settings”, puis sur “Global Styles” et enfin sur “Scripts” et cochez la case “Smooth Scroll to Hash Links”

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