Créer un lien "ancre" au sein d'une page

Dans le cas d'une page assez longue ou d'un site d'une seule page (voir exemple), il est parfois nécessaire d'envoyer les gens plus bas dans la page. On utilise pour cela un lien vers "une ancre", c'est-à-dire un lien au sein de la même page. Conseils et mode d'emploi.

Créer une ancre dans une page Jimdo

Un exemple : lien vers les conditions générales

Dans le formulaire d'inscription à nos formations, on recommande de lire les conditions générales qui se trouvent en bas de la page. Une fois que les conditions ont été lues, on propose un lien pour revenir ("remonter") au formulaire.

Etape 1 : créer une ancre là où le lien va mener

  • Placez-vous juste au-dessus du texte où vous souhaitez amener les visiteurs (dans notre exemple, au-dessus du titre "Conditions générales").
  • Créez un élément "Widget / HTML"
  • Indiquez le code suivant : <a name="conditions" id="conditions"></a> et sauvez
  • Le nom ("name") de l'ancre ne doit pas comporter de blanc ni d'accent

Etape 2 : créer un lien vers l'ancre

  • Revenez au début de la page et préparez le texte qui servira de lien, soit sous forme de table des matières (liste à puces), soit un simple texte (ex : "Lisez nos conditions générales ci-dessous").
  • Sélectionnez le texte qui sera cliquable
  • Créez un lien EXTERNE avec le nom de l'ancre précédé d'un carré (ex : #conditions)

Etape 3 : nettoyer le code HTML généré par Jimdo

Lorsque l'on crée un lien "externe", Jimdo l'ouvre dans une nouvelle fenêtre. Dans le cas du lien vers une même page, c'est très désagréable pour le visiteur. On devra donc supprimer un morceau de code autour du lien. Pour cela :

  • Cliquez sur la zone de texte avec le lien vers l'ancre
  • Affichez le code HTML (via le bouton bleu "Options supplémentaires" puis le bouton </>)
  • Supprimez, pour chaque lien, le morceau de code suivant : target="_blank"
  • Cliquez sur OK puis sur "Enregistrer"
  • TESTEZ soigneusement les liens créés en passant par le mode "Afficher" de Jimdo !

Etape 4 : proposer un lien pour remonter en haut de la page

  • Reprenez l'étape 1 en créant une ancre nommée "top" en haut de votre page
  • Créez des liens pour revenir au point de départ de la page, sous chaque paragraphe vers lequel vos liens envoient les visiteurs.

Pensez également à activer (via les paramètres) le bouton "Vers le haut" en bas de chaque page.

Mettre une ancre sur un bouton

Ariana (commentaire ci-dessous) souhaitait nettoyer le code HTML pour créer une ancre sur une même page via un bouton d'action et non un texte surligné.

 

Dans ce cas, on va coder le bouton pour qu'il puisse être relié à l'ancre au sein de la même page. Voici le code du bouton "ancre" (à mettre dans un élément Windget / HTML) :

<div id="cc-m-13455919225" class="j-module n j-callToAction">
<div class="j-calltoaction-wrapper j-calltoaction-align-1">
<a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="#tarifs" data-title="Tarifs et disponibilités">Tarifs et disponibilités</a>
</div>
</div>

Mettre des ancres dans le menu de Jimdo

La navigation standard de Jimdo permet de créer un lien vers une ancre au moyen du lien suivant (JimdoPro et JimdoBusiness uniquement). Ceci est utile si vous créez un site sur une seule page.

 

Dans "Modifier navigation", cliquez sur "Lien externe" et remplacez le nom de la page par le nom de l'ancre précédé de /# (exemple : /#astuces).


 

Bon à savoir : si vous créez un site web sur une seule page, vous pouvez suivre cet excellent tutoriel en anglais.

Un script pour ralentir la vitesse de défilement vers l'ancre

Pour que la page se déroule doucement vers la cible du lien "ancre", vous pouvez utiliser le script suivant, proposé dans le tutoriel en anglais de Jimdo sur les sites en une page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">

</script>

 

<script type="text/javascript">

 

//<![CDATA[

 

        $(function() {

          $('a[href*=#]:not([href=#])').click(function() {

            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

              var target = $(this.hash);

              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

              if (target.length) {

                $('html,body').animate({

                  scrollTop: target.offset().top

                }, 1000);

                return false;

              }

            }

          });

        });

 

//]]>

</script>

Il faut coller ce code dans le "head" de votre site (via les paramètres).

Quelques exemples de sites avec des ancres

www.namoclean.be
www.namoclean.be
www.defiline.be
www.defiline.be

N'abusez pas des ancres !

Dans le cas de mon formulaire d'inscription, j'ai mis les conditions générales sur la même page pour éviter de perdre mes visiteurs au moment crucial de leur inscription. J'ai donc utilisé un lien vers le bas de la page.

 

Toutefois, le visiteur est souvent perdu lorsqu'il clique sur un lien vers une ancre. Il faut donc limiter cette pratique.

 

Si votre page est longue, vous pouvez :

  • soit créer des sous-pages et permettre d'y accéder via des liens textuels ET des menus (n'oubliez pas des liens textuels entre les pages, au bas de chaque page)
  • soit laisser la page longue mais aérer le texte en y intercalant des sous-titres, de façon à ce que le visiteur y navigue facilement.
Related Posts Plugin for WordPress, Blogger...

Pour en savoir plus

Écrire commentaire

Commentaires: 26
  • #1

    Maillard (jeudi, 19 février 2015 22:24)

    Super clair !
    Un tout grand merci, Sylvie

  • #2

    Arianna (lundi, 28 décembre 2015 00:34)

    Est-il possible de nettoyer le code HTML pour créer une ancre sur une même page via un bouton d'action et non un texte surligné ?
    Merci d'avance

  • #3

    Amaranthe (mardi, 22 mars 2016 13:37)

    Chère Arianna,

    Voici le code du bouton "ancre" (à mettre dans un élément Windget / HTML) :

    <div id="cc-m-13455919225" class="j-module n j-callToAction">
    <div class="j-calltoaction-wrapper j-calltoaction-align-1">
    <a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="#tarifs" data-title="Tarifs et disponibilités">Tarifs et disponibilités</a>
    </div>
    </div>

  • #4

    Morgane (lundi, 08 août 2016 16:50)

    Bonjour,
    Tout d'abord merci pour ce tuto ! Une question, comment faire pour que la page ne s'ouvre pas dans un nouvel onglet, lorsqu'on intègre l'ancre directement dans le menu? (j'ai bien compris comment le faire lorsqu'il s'agit d'un texte)
    Merci d'avance

  • #5

    Morgane (lundi, 08 août 2016 16:54)

    (ma question est d'ailleurs valable pour tous les liens externes insérés dans le menu, pas seulement dans le cas où on utilise des ancres)

  • #6

    Jo (jeudi, 12 janvier 2017 15:44)

    Bonjour,
    Merci pour ce tuto qui a toujours fonctionné jusque fin 2016 car depuis 2 jours, lorsque je met en place des ancres (et après toutes vérifications), si je clique dessus, il m'ouvrir une nouvelle fenêtre où le site me dit que la page est introuvable.
    Je ne sais vraiment pourquoi ça me fait ça, est-ce que le changement, depuis janvier 2017, en https peut en être la cause?

  • #7

    Amaranthe (vendredi, 13 janvier 2017 09:53)

    Bonjour Jo, Merci d'avoir signalé ce problème. Avez-vous remonté l'info à Jimdo ? C'est très probablement lié au passage en https, en effet.

  • #8

    LURDOS (mardi, 21 février 2017 14:57)

    Bonjour,
    Je suis en rain de retire mon site en one page, et je n'arrive pas a modifier le menu de base du site pour que lorsque l'on clique sur présentation par exemple on arrive sur la partie de la page correspondante sans pour autant ouvrir un nouvel onglet. Comment faire
    Merci

  • #9

    Amaranthe (mardi, 21 février 2017 21:24)

    Cher Lurdos,

    Je vous invite à consulter ce tutoriel en anglais sur les sites d'une page : https://support.jimdo.com/faq/how-to-make-a-one-page-website/

    Voici le résultat en ligne : https://amaranthe3.jimdo.com/ (les menus n'ouvrent pas une nouvelle fenêtre, c'est donc possible).

    Tenez-moi au courant et bon travail !

  • #10

    LURDOS (mercredi, 22 février 2017 15:39)

    Bonjour,
    Merci pour votre réponse. Je n'arrive pas a mettre en place la procédure. Je dois être idiot, mais il y à toujours quelque chose qui ne fonctionne pas.
    Pourriez-vous m'aider ?
    Merci

  • #11

    Jo (samedi, 18 mars 2017 19:29)

    Bonjour voici la réponse du support jimdo concernant mon post #06 :

    "Si les ancres que vous évoquées sont "Discographie I Radioshow I Vidéos", celles-ci fonctionne correctement, avez vous résolu votre problème ? En général, les ancres cassent lors la navigation est réorganisée, ou même lorsque l'onglet est renommé ; lorsque vous faites cela sur une pages où il y a des ancres, il faut bien veiller à actualiser les liens/ancres qui y mènent.

    Concernant le second site, nous vous laissons la possibilité d'insérer du code, mais nous ne pourrons cependant pas vous fournir de code pré-fabriqué pour réaliser une fonction particulière ni vous proposer de support le concernant. La communauté Jimdo France pourra cependant peut-être vous aider, que ce soit sur ce site: http://communautefrancophone.jimdo.com/ ou sur notre forum: http://www.jimdoforum.fr/"

    Je n'ai donc pas de réponse à mon problème, tant pis.

  • #12

    Claire marie (vendredi, 12 mai 2017 13:49)

    Bonjour,
    J'essaie de mettre en place la procédure, d'une page à une autre. Mais je bloque à l'étape 3. Je n'arrive pas à afficher le code HTML, je ne trouve pas le bouton bleu "options supplémentaires" ... pouvez vous m'en dire plus ?
    Merci

  • #13

    Claire marie (vendredi, 12 mai 2017 14:04)

    Re-bonjour,
    En fait j'ai créé un lien avec un bouton, ainsi je ne peux accéder au code HTML. Mais quand je suis dans une interface texte, je ne peux pas créer de lien, le bouton n'est pas cliquable ... pourriez vous me dire comment puis je le rendre cliquable ?
    Merci

  • #14

    Claire marie (vendredi, 12 mai 2017 15:04)

    Alors j'ai trouvé, effectivement c'était clair dans les explications :) ... mais je me rends compte que ça ne marche pas d'une page à l'autre. J'ai essayé sur une même page, et il m'affiche alors une page me demandant de me connecter à jimdo ... Bref ça marche pô.

  • #15

    Amaranthe (vendredi, 12 mai 2017 21:17)

    On dirait que vous avez copié le lien de votre page en mode "édition" et pas en mode "visiteur", ce qui ouvre la page de connexion à Jimdo. Votre URL doit contenir le nom de votre site !

  • #16

    Mathias (mercredi, 28 juin 2017 18:07)

    Bonjour,

    Merci pour ce tuto très complet et explicite !
    Je voulais savoir comment créer un lien vers une ancre dans une autre page que celle de l'ancre.
    Merci beaucoup.

  • #17

    Mathias (jeudi, 29 juin 2017 07:39)

    Bonjour,

    Désolé, je le redis plus clairement:
    Sur la page A il y a une ancre, et sur la page B le lien vers cette ancre. Quel serait le code du lien texte ou bouton sur la page B?
    Merci beaucoup.

  • #18

    Amaranthe (jeudi, 29 juin 2017 12:51)

    Cher Mathias, Un lien externe du type <a href="https://www.monsite.com/ma-page-A#ancre> devrait fonctionner, mais je crains que Jimdo ne l'ouvre dans une nouvelle fenêtre, ce qui est très énervant pour le visiteur. Je vous laisse tester. Tenez-moi au courant !

  • #19

    Mathias (samedi, 01 juillet 2017 14:29)

    Bonjour,
    Cela marche comme vous l'indiquez, merci beaucoup ! L'énervement du nouvel onglet est un moindre mal. Bien à vous.

  • #20

    nathalie (dimanche, 29 avril 2018 14:42)

    Merci pour ces infos.
    Je pousse le bouchon plus loin : serait il possible de "marquer" les widgets sur la console d'administration (par exemple par une couleur, ou un titre qui ne s'afficherait pas en mode visiteur) car sur une page pleine d'éléments, il est parfois difficile de retrouver le widget qu'on a créé puisqu'il devient invisible une fois enregistré ?

  • #21

    Amaranthe (mercredi, 02 mai 2018 22:11)

    Il existe en effet un "safe mode" dans Jimdo permettant d'afficher les widgets d'une page. Pour y accéder, le lien est constitué ainsi :

    https://cms.e.jimdo.com/app/oidc/authenticate?websiteId=XXXXXXXXXXXX&safeMode=1

    La partie XXXXXXXXXXXX est à remplacer par l'ID du site qui apparaît en mode CMS, quand vous êtes connectée à votre site pour le modifier.

    Bonne chance !

  • #22

    Amy (dimanche, 04 novembre 2018 14:34)

    Je n'arrive pas à créer une ancre à partir d'un bouton sans qu'en cliquant dessus cela ouvre une autre page. Pouvez vous m'aider ?
    Merci d'avance.

  • #23

    Amaranthe (vendredi, 09 novembre 2018 17:26)

    Bonjour Amy,

    Refaites l'opération décrite au point 3 : nettoyer le code HTML généré par Jimdo. Bon travail !

  • #24

    Erwan (mercredi, 19 décembre 2018)

    Bonjour Amaranthe,

    Je bloque sur le nettoyage du code html. Je ne trouve pas les boutons Ok et Enregistrer. J'ai bien trouvé la partie de code à supprimer, je la supprime, mon ancre fonctionne parfaitement bien, je réinitialise la page, le code original est revenu... Merci d'avance pour ta réponse.

  • #25

    Amaranthe (mercredi, 19 décembre 2018 11:15)

    Cher Erwan, Je pense que la fenêtre "code HTML" n'est pas affichée en entier sur ton écran, du coup tu ne vois pas le bouton bleu "OK" qui est en bas à droite. Pour solutionner cela, réduis la taille de ton écran en cliquant sur CTRL et "Moins" en même temps. Tu devrais voir le bouton :-)

  • #26

    jonval (mardi, 30 juin 2020 09:39)

    Bonjour ,
    J'ai créer des ancres comme vous l'indiquez .
    Ancre d'arrivée sur une page ,et le lien pour s'y rendre vers le bas d'une autre page avec votre methode
    adresse de la page ou se trouve l'ancre #nom de l'ancre en lien externe .
    Cela ouvre sur une autre fenetre .
    Et je ne comprends pas comment nettoyer le code htlm .
    A moins que l'on ne puisse pas .
    Comment donc faire une ancre sur page 1 et lien sur page 2 sans que cela ouvre une autre fenetre .
    Merci