Ajouter des liens d’ancrage avec défilement sur la même page

Écrit par

dans

,

Ajouter des liens d’ancrage avec défilement sur la même page

Il s’agit d’une fonctionnalité premium disponible dans la version 4.0.1+

Les liens d’ancrage avec défilement sur la même page sont des liens qui pointent vers un emplacement spécifique sur la même page. Lorsque vous cliquez sur un lien de même page, votre navigateur défile vers la zone ciblée.

Vous avez besoin de deux éléments pour créer un lien d’ancrage sur la même page :

  1. Une classe personnalisée ou un ID personnalisé sur un élément, et
  2. Un lien ou un bouton qui fait référence à la classe ou à l’ID personnalisé

1. Une classe personnalisée ou un ID personnalisé sur un élément

Choisissez n’importe quel élément vers le bas de votre page, puis ouvrez ses propriétés. Dans la section avancée, ajoutez une classe personnalisée ou un ID personnalisé nommé « go_here »

2. Un lien ou un bouton qui fait référence à la classe ou à l’ID personnalisé

Créez maintenant un lien ou ajoutez un élément bouton quelque part vers le haut de votre page. Au lieu d’ajouter une URL comme lien, utilisez « .go_here » (avec le point) si vous avez ajouté « go_here » en tant que classe personnalisée ; ou utilisez « #go_here » (avec le dièse) si vous l’avez ajouté en tant qu’ID personnalisé.

Après avoir enregistré votre page, lorsque vous cliquez sur votre lien/bouton, il devrait maintenant défiler de manière fluide vers l’élément situé au bas de votre page.

Vous pouvez également l’utiliser pour cibler des ancres nommées

Les ancres nommées telles que

<a name="go_here"></a>

peuvent également être ciblées en ajoutant un lien vers « #go_here » (avec le dièse)

Autres utilisations

Vous pouvez également cibler d’autres zones de votre page, même en dehors de la zone de l’éditeur, tant que vous les ciblez à l’aide de leurs noms de classe ou de leurs ID.