Un lien d’ancrage (ou « saut de page ») est une URL spéciale qui redirige vers une zone spécifique dans une page. Par exemple, la table des matières de ce guide contient des liens d’ancrage qui vous dirigent vers chaque titre.

Ce guide explique comment ajouter des liens dʼancrage à nʼimporte quelle section de bloc de votre site grâce à un bloc Code.

Étape 1 - Créer un lien

Ajoutez le lien sur lequel les visiteurs cliqueront. Nous utilisons un lien hypertexte dans cet exemple, mais vous pouvez utiliser n’importe quel type de lien.

Dans un bloc Texte, tapez le texte de votre lien, surlignez‑le et cliquez sur lʼicône Lien dans la barre dʼoutils du bloc Texte.

Étape 2 - Ajouter l’URL et le slug de page

Pour certains liens d’ancrage, cette étape n’est pas obligatoire, mais nous vous recommandons de la suivre pour la plupart des liens.

Dans le champ dʼadresse web, ajoutez :

1. L’URL de votre site
2. Le slug de la page que vous liez (même s’il s’agit de la même page)
3. Une barre oblique supplémentaire (/)

Votre lien ressemblera à ceci :

https://exemplesite.com/slugdepage/

Si vous ajoutez des liens d'ancrage à votre page d'accueil, vous n'avez pas besoin d'inclure le slug. Si jamais vous modifiez votre page d'accueil, veillez à ajouter le slug à tous les liens d'ancrage que vous avez créés sur l'ancienne page d'accueil, sinon ils ne fonctionneront pas correctement.

Si vous souhaitez que les visiteurs restent sur la même page, cliquez sur  et vérifiez que l’option Ouvrir dans une nouvelle fenêtre est désactivée.

Astuce : si vous changez de domaine principal ou si vous modifiez le slug de page, pensez à modifier également le lien d’ancrage.

Étape 3 - Créer un identifiant unique

Après le slug de la page, saisissez un hashtag (#) suivi d’un texte. Ce texte est votre identifiant unique.

• Vous pouvez saisir le texte de votre choix comme identifiant unique, mais il ne peut pas contenir d’espaces. Vous pouvez séparer les mots par des tirets.
• Les identifiants uniques sont sensibles à la casse et ne peuvent être utilisés qu’une seule fois par page. Consultez nos recommandations pour en savoir plus.

Après avoir ajouté lʼID unique, lʼURL doit ressembler à ceci :

https://exemplesite.com/slugpage/#identifiant-unique

Cliquez sur Enregistrer, puis sur Appliquer pour enregistrer votre lien.

Étape 4 - Lier l'identifiant unique à une section de votre page

Dans l’éditeur de page, faites défiler l’écran jusqu’à la section vers laquelle vous souhaitez que le lien renvoie les visiteurs, et ajoutez un bloc Code.

Dans le champ de code, ajoutez :

<p id="identifiant-unique">Destination du lien</p>

Dans le premier tag, remplacez identifiant-unique entre guillemets par votre identifiant unique spécifique. Remplacez Destination du lien par le texte que vous souhaitez afficher sur votre site.

Astuce : n'incluez pas le slug de page ou le hashtag (#) de votre lien d'ancrage.

Étape 5 - Enregistrer

Cliquez sur Enregistrer pour publier vos modifications. Le lien que vous avez créé lors de l’étape 1 renvoie maintenant les visiteurs au texte que vous avez saisi lors de l’étape 4.

Utiliser différents types de liens

Nous utilisons dans l’exemple ci-dessus un corps de texte pour le lien d’ancrage de l’étape 1, mais vous pouvez utiliser n’importe quel type de lien, y compris des boutons et des URL de destination d’images. Si vous voulez découvrir quelles sont les différentes options pour les liens, consultez l’article Ajouter des liens sur votre site.

Pour tous les types de liens, ajoutez lʼURL et créez un identifiant unique comme indiqué dans l’étape 2 et l’étape 3 ci-dessus, en utilisant le format suivant :

https://exemplesite.com/slugpage/#identifiant-unique

Formater le texte de destination

Si vous souhaitez donner au texte de destination un format autre que le corps de texte, modifiez les tags <p> et </p> lors de l’étape 4. Si vous ne maîtrisez pas le langage HTML, utilisez les tags du titre 1 : <h1> </h1>.

Lorsque vous utilisez des tags différents, ajoutez l’identifiant unique comme indiqué à l’étape 4 :

Le lien d'ancrage fonctionne même sans texte visible. Si vous ne souhaitez pas que les visiteurs voient du texte à votre point d'ancrage, mettez en forme le texte du point d'ancrage en ne mettant rien entre les balises :

<p id="uniqueid"></p>

Slugs de page et liens ancrés

Nous vous recommandons d’ajouter l’URL et le slug de page avant l’identifiant unique dans la majorité des cas. Si vous n’ajoutez pas le slug de page au lien d’ancrage, ce dernier ne fonctionnera pas dans les cas suivants :

• Dans Internet Explorer
• Si votre lien est un lien de navigation
• Si votre lien renvoie vers une autre page

Des problèmes peuvent survenir dans les navigateurs mobiles Safari avec les liens d’ancrage qui ne contiennent pas l’URL du site. Pour trouver l’URL de votre page, consultez l’article Slugs d’URL.

Si vous savez qu’aucun de vos visiteurs n’utilise Internet Explorer ou le navigateur mobile Safari et que vous créez un lien qui les redirige vers une autre zone située sur la même page (par exemple, vers un en-tête situé plus bas sur la page), vous pouvez utiliser #unique-id dans votre lien sans le slug ou l’URL de la page.

Astuce : pour savoir quels sont les navigateurs utilisés par vos visiteurs, référez-vous au panneau Analyse du trafic.

Lien vers le haut de la page

Pour insérer un lien redirigeant vers le haut de votre page, créez un lien vers l’en-tête à l’aide de l’injection de code. La fonctionnalité Injection de code est une fonctionnalité premium.

1. Ajoutez du texte et un lien dʼancrage en bas de la page ou au pied de page, tel que décrit dans les étapes 1 à 3. Cependant, nʼincluez pas lʼURL de votre site ou de barre oblique (/) avant lʼID unique. Vous pouvez utiliser Haut de page comme texte, et #top comme identifiant unique.
2. Dans le Menu principal, cliquez sur Paramètres, sur Avancé, puis sur Injection de code.
3. Dans le champ En-tête, ajoutez le code suivant : <a id="top"></a>. Si vous avez utilisé un identifiant unique autre que #top lorsque vous avez configuré le lien, assurez-vous de le remplacer dans le tag ouvrant <a>.
4. Cliquez sur Enregistrer.

Cette méthode permet de créer un lien vers le haut de chaque page de votre site. Vous pouvez utiliser le même processus pour créer un lien renvoyant vers le haut dʼune page unique en ajoutant le code aux paramètres avancés de la page.

Limites et bonnes pratiques

Les liens ancrés peuvent constituer un outil puissant pour faciliter la navigation des visiteurs dans votre site, mais il est important de garder en tête certains éléments.

Les identifiants ne peuvent être utilisés qu'une seule fois sur chaque page

Par exemple, si vous utilisez l’identifiant panda sur votre page d’accueil, vous ne pourrez pas ajouter ultérieurement panda comme identifiant sur cette même page. Vous pourrez l’utiliser sur une autre page, mais pas une seconde fois sur votre page d’accueil.

Les identifiants sont sensibles à la casse

Si votre HTML indique id="Panda", mais que votre lien comporte lʼidentifiant #panda, le lien ne fonctionnera pas.

L'identifiant unique est intégré à l'URL lorsqu'une personne clique sur le lien ancré

Quand un visiteur clique sur un lien ancré, l'identifiant unique s'inscrit à la fin de l'URL du site.

Vous pouvez saisir l'identifiant de votre choix

La création d’un identifiant facile à retenir peut simplifier le processus de configuration et faciliter la résolution de problèmes, le cas échéant. Les identifiants faciles à retenir sont pourvus d’une certaine logique, comme #haut pour un lien « Haut de page ».

Les liens ancrés sont également un moyen d'ajouter une touche d'humour et de personnalité à votre site. Gardez à l'esprit que les visiteurs peuvent voir l'identifiant à la fin de l'URL.

La section à laquelle vous renvoyez les utilisateurs s’affiche en haut du navigateur

Le texte de destination apparaît en haut du navigateur, ou aussi haut que possible si peu de contenu se trouve en dessous

Si vous ne voulez pas que votre texte soit en haut de la fenêtre du navigateur, vous pouvez créer de l'espace avant celui-ci en ajoutant des balises <p> avec des espaces insécables à la copie de texte d'atterrissage. Le code HTML d'un espace insécable est &nbsp;

Chaque ensemble de>balises <p>&nbsp;</p> que vous ajoutez avant que le texte ajoute un saut de ligne supplémentaire. Voir les images ci-dessous pour référence.

Résolution de problèmes

Si un lien d’ancrage ne fonctionne pas, vérifiez que :

• Vous avez ajouté un slug de page comme indiqué dans l’étape 2, sans oublier les deux symboles /. Ceci est particulièrement important pour les liens de navigation, les liens provenant d’autres pages et pour Internet Explorer.
• L’identifiant unique est parfaitement identique dans votre lien et dans le texte de destination. Toute différence dans l’orthographe ou l’utilisation de minuscules et de majuscules empêchera le lien de fonctionner.
• Le code HTML du texte de destination est correct. Par exemple, si votre identifiant unique est #bambou, vous devez ajouter le lien id=“bambou” au code HTML du texte de destination.
• Vous avez ajouté www. au début de votre URL si votre domaine principal l’inclut.

Dans les cas suivants, le lien d’ancrage ne fonctionnera pas, même si la configuration est correcte :

• S’il utilise le domaine prédéfini de votre site et que vous le testez alors que vous êtes connecté(e). Testez-le dans un navigateur en mode incognito.
• Si votre site est défini sur privé et que vous testez le lien d'ancrage pendant que vous êtes connecté. Définissez plutôt un mot de passe à l'échelle du site pour votre site et testez dans un navigateur incognito.
• Si la page utilise déjà cet ID. Essayez dʼutiliser un autre ID ou de modifier lʼutilisation des minuscules/majuscules.

Remarque : les modifications de code personnalisé ne sont pas prises en charge par notre service d’assistance. Nous ne sommes pas en mesure de vous aider ni pour la configuration ni pour la résolution de problèmes. En outre, si vous utilisez une solution basée sur du code, nous ne pouvons garantir sa fonctionnalité ni son entière compatibilité avec Squarespace, c’est-à-dire son fonctionnement avec notre design adaptatif et plus particulièrement son affichage sur les appareils mobiles, ainsi que son fonctionnement sur l’ensemble des templates. Le code personnalisé peut également causer des problèmes d’affichage lors des futures mises à jour de notre plateforme. À défaut de pouvoir vous assister pour ces éventuels problèmes, nous vous recommandons les ressources suivantes :

• Découvrez les bonnes pratiques pour ajouter un code personnalisé.
• Consultez notre guide général sur les personnalisations tierces.
• Rendez-vous sur le forum Squarespace, notre communauté qui regroupe clients et développeurs.
• Trouvez un Squarespace Expert qui vous aidera à créer du code personnalisé pour votre site.

Ajax et liens dʼancrage (version 7.0)

Sur la version 7.0, Ajax est une méthode spéciale de chargement du site qui permet aux pages riches en contenu de sʼafficher de manière plus rapide et plus agile. Cependant, Ajax peut compromettre la fonctionnalité des liens dʼancrage, en particulier sur appareil mobile.

Si les étapes de dépannage ci-dessus ne fonctionnent pas et que votre template prend bien en charge Ajax, désactivez-le temporairement dans Styles du site pour voir si cela est à lʼorigine du problème. Ajax est disponible pour ces familles de templates :

• Brine
• Farro
• Tremont
• York

Liens dʼancrage de la page dʼindex (version 7.0)

Dans la version 7.0, il existe une autre façon dʼajouter des liens dʼancrage pour les pages dʼindex empilées, sans que cela requiert du code. Pour en savoir plus, consultez lʼarticle Ajouter des liens dʼancrage sur une page dʼindex.