Remonter au sommaire d'une page

Quand on écrit de longues pages comme je le fais pour les tutoriels de ce site (ce qui n'est pas recommandé d'ailleurs... ), il faut tout faire pour aider le visiteur à s'y repérer.

 

Outre le fait de structurer le contenu très rigoureusement avec titres, sous-titres, notes et notules, on peut aussi écrire un sommaire qui annonce et clarifie ce contenu. Ensuite, dans le corps de la page, il faut penser à insérer, à intervalles réguliers, des flèches qui permettent de revenir à ce sommaire (c'est-à-dire en haut de page). Le but de ce tutoriel est de vous fournir des codes prêts à l'emploi à cette fin.

Au sommaire de ce tutoriel

Ce tutoriel se déroule en deux temps :

Etape 1 : poser l'ancre du sommaire

Avant de rédiger votre sommaire, ajoutez un module +Widget/HTML :

Le module Widget/HTML
Le module Widget/HTML

Dans le cadre de saisie qui apparaît, copiez-collez le code suivant : c'est l'ancre du sommaire. Vous pouvez écrire le texte de votre choix entre les balises, bien entendu.

<a id="sommaire" name="sommaire">Au sommaire de ce chapitre</a>

Enregistrez votre modification. Puis, juste en dessous, rédigez le sommaire de votre article dans un simple module de texte.

Etape 2 : insérer la flèche qui revient au sommaire

Il ne vous reste plus qu'à rédiger votre article, en suivant le plan annoncé. Pour permettre à vos lecteurs de remonter au sommaire, insérez dans le corps de l'article, entre les différents chapitres ou paragraphes, une flèche de remontée.

 

Je vous en propose 8 modèles différents, certains sans image, d'autres avec des images hébergées sur Imageshack. Copiez-collez le code de votre choix dans un module +Widget/HTML à l'endroit où vous souhaitez voir la flèche apparaître.

Pour chaque code, vous pouvez choisir l'alignement de la flèche (à gauche, au centre ou à droite) : la ligne de code à modifier est précisée en commentaire.

Modèle n°1 (texte, sans image)

Pour afficher cela :

... copier-coller ce code :

<div align="center"> <!-- Pour aligner à droite ou à gauche, remplacer "center" par "left" ou "right" -->
    <a href="#sommaire" title="[Retour au sommaire]" style="text-decoration: none;"><small>- SOMMAIRE -</small></a>
</div>

Modèle n°2 (texte, sans image)

Pour afficher cela :

... copier-coller ce code :

<div align="center"> <!-- Pour aligner à gauche ou à droite, remplacer "center" par "left" ou "right" -->
    <a href="#sommaire" title="[Retour au sommaire]" style="text-decoration: none; font-size: 16px;"></a>
</div>

Modèle n°3 (texte, sans image)

Pour afficher cela :

^

... copier-coller ce code :

<div align="center"> <!-- Pour aligner à gauche ou à droite, remplacer "center" par "left" ou "right" -->
    <a href="#sommaire" title="[Retour au sommaire]" style="text-decoration: none; border-bottom: 0px; font-size: 20px;">^</a>
</div>

Modèle n°4 (image hébergée sur Imageshack)

Pour afficher cela :

Flèche vers le haut

... copier-coller ce code :

<div align="center"> <!-- Pour aligner à gauche ou à droite, remplacer "center" par "left" ou "right" -->
    <a href="#sommaire" title="[Retour au sommaire]"><img src="http://img841.imageshack.us/img841/2773/bthaut.png" alt="Flèche vers le haut" /></a>
</div>

Modèle n°5 (image hébergée sur Imageshack)

Pour afficher cela :

Flèche vers le haut

... copier-coller ce code :

<div align="left"> <!-- Pour aligner au centre ou à droite, remplacer "left" par "center" ou "right" -->
    <a href="#sommaire" title="[Retour au sommaire]"><img src="http://img208.imageshack.us/img208/5130/arrowup.gif" alt="Flèche vers le haut" /></a>
</div>

Modèle n°6 (image hébergée sur Imageshack)

Pour afficher cela :

Flèche vers le haut

... copier-coller ce code :

<div align="right"> <!-- Pour aligner à gauche ou au centre, remplacer "right" par "left" ou "center" -->
    <a href="#sommaire" title="[Retour au sommaire]"><img src="http://img27.imageshack.us/img27/350/retourhautdepage.gif" alt="Flèche vers le haut" /></a>
</div>

Modèle n°7 (image hébergée sur Imageshack)

Pour afficher cela :

Flèche vers le haut

... copier-coller ce code :

<div align="right"> <!-- Pour aligner à gauche ou au centre, remplacer "right" par "left" ou "center" -->
    <a href="#sommaire" title="Retourner au sommaire"><img src="http://img231.imageshack.us/img231/8448/flechehaut01.gif" alt="Flèche vers le haut" /></a>
</div>

Modèle n°8 (image hébergée sur Imageshack)

Pour afficher cela :

Flèche vers le haut

... copier-coller ce code :

<div align="right"> <!-- Pour aligner à gauche ou au centre, remplacer "right" par "left" ou "center" -->
    <a href="#sommaire" title="[Retour au sommaire]"><img src="http://img810.imageshack.us/img810/5941/retourhaut2.gif" alt="Flèche vers le haut" /></a>
</div>

Je vous écoute !

Écrire commentaire

Commentaires : 7
  • #1

    aloeverasante (dimanche, 18 novembre 2012 20:07)

    super ! encore merci ;)

  • #2

    worldasianselfdefense (samedi, 30 mars 2013 17:24)

    bonjour,
    Lorsque j'insère des éléments sur une page, certains de ces élements ( photos, textes) vont également se placer sur d'autres pages su site ?
    Comment résoudre ce problème et protéger chaque page?
    Merci

  • #3

    Isa (dimanche, 31 mars 2013 16:50)

    Je ne suis pas sûre de bien comprendre votre question, mais voici une explication :
    - les éléments que vous insérez dans la colonne latérale de votre site se dupliquent forcément sur toutes les pages du site.
    - les éléments que vous insérez dans le colonne centrale (de contenu) sont uniques sur la page et ne se dupliquent pas d'une page à l'autre.
    - les éléments que vous insérez dans le pied de page de votre site se dupliquent nécessairement d'une page à l'autre.
    J'espère vous avoir éclairé. Je vous recommande l'aide de Jimdo sinon (elle a été refaite et est top !) pour les fonctionnalités de base et un bon démarrage :)

  • #4

    Portuno (lundi, 27 mai 2013 15:08)

    Bonjour,
    Tout d'abord, merci pour tout le travail que vous faites.
    J'ai installé votre tuto mais voilà, la navigation n'est pas fluide comme sur votre site lorsque je remonte, que dois-je faire ? (avez vous inscrit un script special ds le head ?)
    Merci pour votre réponse.

  • #5

    Isabelle (jeudi, 04 juillet 2013 17:35)

    @Portuno : oui, il s'agit du script de remontée douce "smoothscroll.js". J'en explique le fonctionnement et l'installation ici : http://realia.jimdo.com/faciliter-la-navigation/installer-un-ascenseur/ (2e partie du tutoriel).

  • #6

    mathtice31 (dimanche, 28 juillet 2013 07:51)

    merci bcq ma chere

  • #7

    carteducieltest (vendredi, 23 août 2013 18:47)

    Allo,
    C'est ce code qui fonctionne sur mes sites:


    <div align="center">
    <!-- Pour aligner à gauche ou au centre, remplacer "right" par "left" ou "center" -->
    <a href="#top" title="[Retour haut de page]"><img src="http://img27.imageshack.us/img27/350/retourhautdepage.gif" alt="Flèche vers le haut" /></a>
    </div>

Ruban