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.

Le principe de base est le suivant :

1. Créer une "ancre" là où le visiteur doit arriver
2. Créer un lien vers l'ancre
3. Nettoyer le code HTML généré par Jimdo 
4. Proposer un lien pour revenir en haut de la page 

En savoir plus :

• Une ancre sur un bouton d'action
• Des ancres dans le menu de Jimdo
• Un script pour ralentir la vitesse de défilement vers l'ancre
• Quelques exemples de sites
• Ne pas abuser des ancres !

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.

• 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

Remonter

• 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)

Remonter

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 !

Remonter

• 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.

Remonter

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>

Remonter

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.

Remonter

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).

Remonter

Remonter

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.

Remonter

• Un site multilingue en mode "one-page"
• Tutoriel de Jimdo sur les sites d'une page (en anglais)