Installer un ascenseur dans Jimdo (v. 2)

MAJ du 5 mars 2013 : depuis 2 mois, Jimdo intègre nativement un bouton "Vers le haut". Je vous recommande de l'activer dans l'administration de votre site. Ce tutoriel est devenu inutile.

22 août 2012 - Ce tutoriel est destiné à remplacer celui-ci, qui posait des problèmes d'intégration dans Jimdo en raison des modifications fréquemment portées dans les noms des classes des templates. Ici, le script et le code sont indépendants de Jimdo, donc compatibles avec tous les templates. Alleluia !

Dans Jimdo, à la base, il n'y a pas d'ascenseur. Je veux parler de ces flèches bien pratiques qui permettent :

  •  quand on a atteint le bas d'une longue page, de remonter d'un clic en haut, entre autre vers le menu de navigation,
  • d'atteindre, inversement, le bas de la page en un clic.

Ces flèches seraient pourtant bien utiles, puisque dans le pied de page se trouvent nombre de fonctions importantes de Jimdo, comme la fonction d'impression, le plan du site et, côté "admin", le bouton de connexion et d'aperçu.

Démonstration

 Vous pouvez voir une démonstration de ce script sur mon site de test : favoris-et-cot'lettes. Regardez l'ascenseur qui apparaît dans le coin inférieur droit de l'écran et essayez l'effet de défilement doux :

Cliquez pour agrandir
Cliquez pour agrandir
Flèche vers le haut

Etape 1 - Installation du script

On commence par installer le moteur qui va faire monter et descendre l'ascenseur.

Où ça se passe ?

En mode "Admin", allez dans Paramètres > Modifier le head :

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

Le moteur qui fait fonctionner l'ascenseur

Collez dans le cadre de saisie qui apparaît le code suivant, sans rien changer :

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

<script type="text/javascript" language="javascript">
//<![CDATA[
         $j = jQuery.noConflict(true);
         $j(function () {
             $j('#scrlBotm').click(function () {
                 $j('html, body').animate({
                     scrollTop: $j(document).height()
                 },
                 500);
                 return false;
             });
 
             $j('#scrlTop').click(function () {
                 $j('html, body').animate({
                     scrollTop: '0px'
                 },
                 500);
                 return false;
             });
         });
//]]>
</script>

Cliquez sur le bouton Enregistrer pour valider le code. Un message apparaît vous informant que le code a été "nettoyé" (ou quelque chose de cet ordre-là) ; ne vous en préoccupez pas, c'est normal.

Flèche vers le haut

Etape 2 - Mise en place des flèches

La mise en place des flèches se fait aussi simplement. Rendez-vous dans la barre latérale de votre site, sur n'importe quelle page de votre site, et ajoutez-y un module +Widget/HTML :

Le module Widget/HTML
Le module Widget/HTML

Dans le cadre de saisie qui apparaît, copiez-collez un des codes ci-dessous. Vous pouvez choisir un des 8 modèles de flèches proposés. Enregistrez, passez en mode "Visiteur" et voilà !

Modèle n°1 : flèches rondes noires

Aperçu du résultat

Modèle n°1
Modèle n°1

Le code à copier-coller

<!-- code flèche haut -->
<a id="scrlTop" title="Vers le haut" href="#" style="position: fixed; bottom: 53px; right:8px;" name="scrlTop"><img src="http://sd-1.archive-host.com/membres/images/3347790973941088/rond-up.png" alt=
"Flèche haut" /></a>

<!-- code flèche bas -->
<a id="scrlBotm" title="Vers le bas" href="#" style="position: fixed; bottom: 8px; right: 8px;" name="scrlBotm"><img src=
"http://sd-1.archive-host.com/membres/images/3347790973941088/rond-down.png" alt="Flèche bas" /></a>

Modèle n°2 : flèches carrées noires et blanches

Aperçu du résultat

Modèle n°2
Modèle n°2

Le code à copier-coller

<!-- code flèche haut -->
<a id="scrlTop" title="Vers le haut" href="#" style="position: fixed; bottom: 45px; right:8px;" name="scrlTop"><img src="http://sd-1.archive-host.com/membres/images/3347790973941088/noir-up.png" alt=
"Flèche haut" /></a>

<!-- code flèche bas -->
<a id="scrlBotm" title="Vers le bas" href="#" style="position: fixed; bottom: 8px; right: 8px;" name="scrlBotm"><img src="http://sd-1.archive-host.com/membres/images/3347790973941088/noir-down.png"
alt="Flèche bas" /></a>

Modèle n°3 : flèches carrées grises et blanches

Aperçu du résultat

Modèle n°3
Modèle n°3

Le code à copier-coller

<!-- code flèche haut -->
<a id="scrlTop" title="Vers le haut" href="#" style="position: fixed; bottom: 45px; right:8px;" name="scrlTop"><img src="http://sd-1.archive-host.com/membres/images/3347790973941088/gris-up.png" alt=
"Flèche haut" /></a>

<!-- code flèche bas -->
<a id="scrlBotm" title="Vers le bas" href="#" style="position: fixed; bottom: 8px; right: 8px;" name="scrlBotm"><img src="http://sd-1.archive-host.com/membres/images/3347790973941088/gris-down.png"
alt="Flèche bas" /></a>

Modèle n°4 : chevrons simples noirs

Aperçu du résultat

Modèle n°4
Modèle n°4

Le code à copier-coller

<!-- code flèche haut -->
<a id="scrlTop" title="Vers le haut" href="#" style="position: fixed; bottom: 45px; right:12px;" name="scrlTop"><img src="http://sd-1.archive-host.com/membres/images/3347790973941088/triange-up.png"
alt="Flèche haut" /></a>

<!-- code flèche bas -->
<a id="scrlBotm" title="Vers le bas" href="#" style="position: fixed; bottom: 8px; right: 8px;" name="scrlBotm"><img src=
"http://sd-1.archive-host.com/membres/images/3347790973941088/triangle-down.png" alt="Flèche bas" /></a>

Modèle n°5 : flèches simples gris foncé

Aperçu du résultat

Modèle n°5
Modèle n°5

Le code à copier-coller

<!-- code flèche haut -->
<a id="scrlTop" title="Vers le haut" href="#" style="position: fixed; bottom: 50px; right:8px;" name="scrlTop"><img src=
"http://sd-1.archive-host.com/membres/images/3347790973941088/arrow-simple-up.png" alt="Flèche haut" /></a>

<!-- code flèche bas -->
<a id="scrlBotm" title="Vers le bas" href="#" style="position: fixed; bottom: 8px; right: 8px;" name="scrlBotm"><img src=
"http://sd-1.archive-host.com/membres/images/3347790973941088/arrow-simple-down.png" alt="Flèche bas" /></a>

Modèle n°6 : flèches rondes noires cerclées de blanc

Aperçu du résultat

Modèle n°6
Modèle n°6

Le code à copier-coller

<!-- code flèche haut -->
<a id="scrlTop" title="Vers le haut" href="#" style="position: fixed; bottom: 40px; right:8px;" name="scrlTop"><img src=
"http://sd-1.archive-host.com/membres/images/3347790973941088/navigation-up.png" alt="Flèche haut" /></a>

<!-- code flèche bas -->
<a id="scrlBotm" title="Vers le bas" href="#" style="position: fixed; bottom: 8px; right: 8px;" name="scrlBotm"><img src=
"http://sd-1.archive-host.com/membres/images/3347790973941088/navigation-down.png" alt="Flèche bas" /></a>

Modèle n°7 : flèches carrées grises semi-transparentes

Aperçu du résultat

Modèle n°7
Modèle n°7

Le code à copier-coller

<!-- code flèche haut -->
<a id="scrlTop" title="Vers le haut" href="#" style="position: fixed; bottom: 50px; right:8px;" name="scrlTop"><img src=
"http://sd-1.archive-host.com/membres/images/3347790973941088/scroll-trans-top.png" alt="Flèche haut" /></a>

<!-- code flèche bas -->
<a id="scrlBotm" title="Vers le bas" href="#" style="position: fixed; bottom: 8px; right: 8px;" name="scrlBotm"><img src=
"http://sd-1.archive-host.com/membres/images/3347790973941088/scroll-trans-down.png" alt="Flèche bas" /></a>

Modèle n°8 : flèches rondes grises semi-transparentes

Aperçu du résultat

Modèle n°8
Modèle n°8

Le code à copier-coller

<!-- code flèche haut -->
<a id="scrlTop" title="Vers le haut" href="#" style="position: fixed; bottom: 50px; right:8px;" name="scrlTop"
<img src="http://sd-1.archive-host.com/membres/images/3347790973941088/scroll-top.png"
alt="Flèche haut" /></a>

<!-- code flèche bas -->
<a id="scrlBotm" title="Vers le bas" href="#" style="position: fixed; bottom: 8px; right: 8px;" name="scrlBotm"
<img src="http://sd-1.archive-host.com/membres/images/3347790973941088/scroll-down.png"
alt="Flèche bas" /></a>
Flèche vers le haut

Installer ses propres flèches

Alors là, ça se complique un peu... ;) Si vous avez déjà une paire de flèches qui vous plaît, vous pouvez l'utiliser, mais il va falloir un peu trifouiller le code.

La méthode

Voici donc comment procéder :

  1. Suivez l'étape 1 du présent tutoriel.
  2. Chargez vos deux flèches sur un hébergeur d'images (type Imageshack, Hostingpics, etc). Attention, elles doivent avoir la même taille.
  3. Récupérez l'URL de chaque flèche : les hébergeurs d'images fournissent systématiquement l'adresse de l'image chargée, donc aucune difficulté.
  4. Copiez-collez le code ci-dessous comme expliqué dans l'étape 2 en prenant soin d'insérer l'URL de chacune de vos flèches aux endroits précisés dans le code.
  5. Enregistrez et repassez en mode Aperçu pour voir le rendu.

Le code à bidouiller

<!-- code flèche haut -->
<a id="scrlTop" title="Vers le haut" href="#" style="position: fixed; bottom: 50px; right: 8px;" name="scrlTop"
<img src="URL_de_votre_flèche_vers_le_haut_ici" alt="Flèche haut" /></a>

<!-- code flèche bas -->
<a id="scrlBotm" title="Vers le bas" href="#" style="position: fixed; bottom: 8px; right: 8px;" name="scrlBotm"
<img src="URL_de_votre_flèche_vers_le_bas_ici" alt="Flèche bas" /></a>

C'est là que ça se corse un peu : suivant la taille de vos flèches, il se peut qu'elles se chevauchent ou, au contraire, qu'elles soient trop éloignées l'une de l'autre. On va voir comment y remédier.

 

Dans tous les cas, il n'est pas nécessaire de toucher au code de la flèche du bas : elle est placée à 8 pixels du bord inférieur de la fenêtre (c'est ce que signifie "bottom: 8px") et à 8 pixels du bord droit (dans le code : "right: 8px").

 

C'est donc la flèche du haut qu'il va falloir déplacer :

  • vers le haut, si elle est plus grande : remplacez alors la valeur "bottom: 50px" du code donné par "bottom: 60px" par exemple. Il faut tâtonner pour trouver la valeur la plus appropriée. En revanche, ne touchez pas à la valeur "right: 8px".
  • vers le bas, si elle est plus petite : remplacez alors la valeur "bottom: 50px" du code donné par "bottom: 45px" par exemple. Il faut ensuite tâtonner pour trouver la valeur la plus appropriée. En revanche, ne touchez pas à la valeur "right: 8px".

Bon courage à vous !

Les trucs à signaler, c'est ici

Écrire commentaire

Commentaires : 19
  • #1

    auplaisirdelire (jeudi, 30 août 2012 22:38)

    Bonjour,
    J'ai déjà modifié le head en insérant un texte qui défile !
    Puis-je mettre ce code endessous ????
    Cela ne va pas supprimer ou altérer ce que j'y ai déjà mis ?
    Merci

  • #2

    Dominique BRUYNEEL (mercredi, 05 septembre 2012 21:18)

    ASTUCE

    J'ai inséré mes 2 flèches images dans "Design personnel"
    et dans Firefox, Outils > Informations sur la page
    une fenêtre s'ouvre et en cliquant sur le 2è bouton
    la liste des images s'affichent avec leur adresse (URL).

    Il n'a plus qu'à copier/coller celle-ci dans TON CODE

    Bien cordialement

    Dominique

  • #3

    Rigaud Mickael (mercredi, 12 septembre 2012 14:24)

    Merci beaucoup pour ce nouveau code fonctionnel. Ce site est toujours d'une grande aide!

  • #4

    genealigeriennepercheronne (dimanche, 16 septembre 2012 17:55)

    Merci beaucoup pour toutes vos astuces.

  • #5

    lelienhgec (dimanche, 14 octobre 2012 13:37)

    Extra! Merci pour vos tutoriels et astuces!

  • #6

    robin223 (lundi, 22 octobre 2012 19:38)

    comment enlever ça

  • #7

    aloeverasante (mardi, 13 novembre 2012 17:12)

    Super ! les fleches sont plus grosses que la version d'avant , merci !

  • #8

    COURVOISIER (dimanche, 18 novembre 2012 20:14)

    Super merci. Dites moi, il faut donc mettre le widget html sur chacune des pages du site?

  • #9

    y-et-e (samedi, 26 janvier 2013 13:05)

    Super ton site, j'adore ;)

  • #10

    cueillettedecaillan (samedi, 23 février 2013 12:06)

    Heureusement que ce site existe !!! Merci.

  • #11

    cck971 (mercredi, 10 juillet 2013 14:59)

    bonjour
    je voudrais enlever les flèches car celle vers le bas ne fonctionne pas
    merci

  • #12

    Isabelle (mercredi, 10 juillet 2013 16:01)

    Bonjour,
    Il vous suffit de supprimer le widget/HTML. A cette fin, utilisez le "mode sans échec" comme expliqué ici : http://realia.jimdo.com/2013/07/05/utiliser-le-mode-sans-%C3%A9chec-de-jimdo/
    Cordialement,
    Isa

  • #13

    carteducieltest (samedi, 14 septembre 2013 01:09)

    Bonjour Isabelle,
    Comme mes flèches haut/bas fonctionnent encore sur mon site jardinhostalavista.jimdo.com je voulais les garder sur ce site test aussi. Alors j'ai repris le code que Gérard m'avait donné pour faire fonctionner mes flèches. Donc pas besoin de ton code pour mettre dans le Head seulement celui-ci insérer comme ça dans le Head et ça fonctionne. Je trouvais plate de ne pas pouvoir utiliser une flèche vers le bas pour aller plus vite. Voici le code:

    <meta http-equiv="Page-Exit" content="revealTrans(Duration=2,Transition=23)" />
    <meta http-equiv="Page-Enter" content="revealTrans(Duration=2,Transition=23)" />

    Françoise Gourde

  • #14

    carteducieltest (samedi, 14 septembre 2013 01:30)

    Bon mon nez vient de s'allonger car ça ne fonctionne plus pour mon site test mais pour mon autre site ça fonctionne toujours.

  • #15

    Isabelle (vendredi, 04 octobre 2013 21:52)

    @carteducieltest : les codes de Gérard permettent de faire des transitions en fondu-enchaîné d'une page à l'autre (avec certains navigateurs seulement je crois), mais pas de faire fonctionner les flèches haut/bas... Cela dit, apparemment, l'ensemble s'est réglé ; je viens de tester sur votre site ?

  • #16

    carteducieltest (mercredi, 09 octobre 2013 08:12)

    Il faut en plus insérer dans le head le moteur qui fait fonctionner l'ascenseur tel qu'indiqué plus haut et choisir ses flèche naturellement

    Françoise Gourde

  • #17

    vdsvoyage (dimanche, 19 janvier 2014 13:10)

    Bonjour,

    Les flèches ne fonctionnent que dans un sens (vers le haut) mais pas vers le bas. Comment faire pour qu'elles fonctionnent dans les 2 sens? Merci par avance.

  • #18

    vdsvoyage (dimanche, 19 janvier 2014 13:14)

    Si on met un code dans le header, est-ce que cela supprime les codes précédents qui ont été enregistrés pour d'autres fonctions?

  • #19

    Isabelle (lundi, 20 janvier 2014 15:28)

    @vdsvoyage : les flèches ne fonctionnent pas car vous n'avez pas inséré le "moteur" qui les fait marcher. Revoyez la première partie du tuto (étape 1). Sinon, l'ajout de code dans le header ne supprime pas les codes précédents. Bon courage !

Ruban