Installer un ascenseur dans Jimdo

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.
MAJ du 22 août 2012 : j'ai trouvé une réplique de l'ascenseur décrit dans ce tutoriel, mais qui a l'avantage de ne dépendre d'aucune classe CSS de Jimdo. Ce nouvel ascenseur, hyper facile à installer, est ainsi compatible avec tous les templates de Jimdo, quels que soient les changements qu'ils pourront subir. Il est recommandé de passer à la v. 2 pour les utilisateurs et les déçus de la v. 1 ! Ce tutoriel est désormais obsolète.
MAJ du 19 juillet 2012 : Jimdo a de nouveau modifié les classes de certains templates :( Si vous n'arrivez pas à faire fonctionner l'ascenseur de ce tutoriel sur votre site, c'est probablement à cause de ces changements... Jetez-vous alors sans hésiter sur ce nouveau tutoriel : il vous permet également d'installer une flèche de retour en haut de page. Et comme il est indépendant des classes CSS de Jimdo, il fonctionnera à coup sûr ! Enfin, cherry on the cake, cet ascenseur alternatif s'installe super facilement !
MAJ du 22 avril 2011 - J'ai enfin trouvé pourquoi tant de Jimdonautes n'arrivaient pas à faire fonctionner l'ascenseur : Jimdo a modifié les noms des classes de ses templates. Le tutoriel propose donc désormais deux codes : un pour les anciens templates et un pour les plus récents.

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 seul clic en haut 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

Regardez l'ascenseur dans le coin inférieur droit de votre écran !

Essayez l'effet de défilement doux : c'est à un mini javascript qu'on le doit !

Deux méthodes d'installation au choix

Il y a trois façons de procéder pour installer l'ascenseur :

  • La première méthode simplissime à mettre en place utilise des images hébergées ailleurs que sur votre site. Elle s'adresse aux très grands débutants.
  • La seconde méthode est assez simple : choisissez-la si vous ne vous sentez pas encore très à l'aise avec Jimdo, mais que vous préférez que les images des flèches soient hébergées sur votre site.

En option, je vous propose d'inclure un petit javascript pour animer le défilement de la page. La manip est simple et rapide.

Méthode 1 : installation simplissime

J'ai déjà chargé les deux images des flèches chez Imageshack, un hébergeur gratuit d'images. Vous n'avez plus qu'à insérer le code.

 

Ajoutez un bloc + Widget/HTML dans la colonne latérale de votre site :

Screenshot : ajout d'un widget
Ajout d'un bloc widget/HTML

Copiez-collez dans la fenêtre de saisie un des deux codes ci-dessous et enregistrez pour valider les changements.

Code pour les anciens templates Jimdo :

<!-- code fleche bas -->
<a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#footer" title="Atteindre le bas de la page">
<img src="http://img411.imageshack.us/img411/5653/arrowdown.gif" alt="Flèche bas" />
</a>
<!-- code fleche haut -->
<a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#container" title="Remonter">
<img src="http://img208.imageshack.us/img208/5130/arrowup.gif" alt="Flèche haut" />
</a>

Code pour les templates récents ou mis à jour :

<!-- code fleche bas -->
<a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#cc-tp-footer" title="Atteindre le bas de la page">
<img src="http://img411.imageshack.us/img411/5653/arrowdown.gif" alt="Flèche bas" />
</a>
<!-- code fleche haut -->
<a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#cc-tp-container" title="Remonter">
<img src="http://img208.imageshack.us/img208/5130/arrowup.gif" alt="Flèche haut" />
</a>

Méthode 2 : installation simple

Etape 1 : traitement des images

Récupérer les flèches sur votre disque dur

D'abord, il faut récupérer sur votre disque dur les flèches à utiliser. N'importe quelle paire de flèches "haut / bas" fera l'affaire, encore qu'il soit préférable que les deux images soient assorties. Je vous propose pour commencer d'utiliser les deux flèches que j'ai mises en place sur mon site :

Flèche haut

Flèche haut (clic droit sur l'image pour la charger sur votre disque dur) :

Flèche bas

Flèche bas (clic droit sur l'image pour la charger sur votre disque dur) :

Envoyer les flèches sur votre site

Maintenant, il faut charger les flèches sur votre site. Pour cela, on va créer dans le menu de navigation une nouvelle page nommée Cache sur laquelle on va insérer les deux flèches et qu'on va rendre invisible aux yeux des visiteurs en cliquant sur l'oeil :

screenshot : cache
Création de la page cachée
Screenshot : résultat de cache
En admin, elle est barrée dans le menu

Sur la page Cache qu'on vient de créer, on ajoute deux blocs + Image correspondant aux deux flèches :

Screenshot : ajout bloc image
Ajout d'un bloc image
Screenshot : les flèches sont chargées
Une flèche insérée, l'autre en cours

Récupération de l'adresse des images

Quand les deux flèches sont insérées sur la page (et donc chargées sur le site), on passe en mode "Visiteur" (en appuyant sur le lien "Afficher" en bas de la page) et on fait un clic droit sur chaque image pour récupérer son adresse de stockage. Selon les navigateurs, les menus contextuels qui s'affichent au clic droit diffèrent. Avec Firefox, on clique-droit et on sélectionne Copier l'adresse de l'image. On colle les deux adresses dans un fichier texte provisoire pour les mémoriser.

On récupère l'adresse de l'image
Clic droit sur l'image > Copier l'adresse de l'image

Etape 2 : la partie "code"

Dans la colonne latérale du site, on ajoute un bloc + Widget/HTML :

Screenshot : ajout d'un bloc Widget
Ajout d'un Widget / HTML

Copiez-collez l'un des deux codes ci-dessous dans le cadre de saisie. Remplacez dans le code adresse_de_la_flèche_bas et de adresse_de_la_flèche_haute par les adresses de vos deux images (récupérées précédemment). Enregistrez les modifications et votre ascenseur apparaît dans le coin inférieur droit de votre écran.

Code pour les anciens templates Jimdo :

<!-- code flèche bas -->
<a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#footer" title="Atteindre le bas de la page">
<img src="adresse_de_la_flèche_bas" alt="Flèche bas" />
</a>
<!-- code flèche haut -->
<a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#container" title="Remonter">
<img src="adresse_de_la_flèche_haute" alt="Flèche haut" />
</a>

Code pour les templates récents ou mis à jour :

<!-- code flèche bas -->
<a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#cc-tp-footer" title="Atteindre le bas de la page">
<img src="adresse_de_la_flèche_bas" alt="Flèche bas" />
</a>
<!-- code flèche haut -->
<a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#cc-tp-container" title="Remonter">
<img src="adresse_de_la_flèche_haute" alt="Flèche haut" />
</a>

L'option "Bling-Bling" : le script de défilement doux

J'ai remarqué que le script de défilement doux ne fonctionne pas sur les pages dont le nom - celui qui apparaît dans la barre d'adresse du navigateur - contient des lettres accentuées. Si quelqu'un sait comment réparer le javascript pour éviter ce problème, je suis preneuse ^^ 

Pour animer le défilement de la page d'une ancre à l'autre, on peut ajouter un léger javascript appelé smoothscroll.js développé par Kryogenix. Il fait doucement défiler la page d'un point à un autre (démonstration ici-même !) et aide le visiteur à mieux s'y retrouver dans sa navigation. Voici comment mettre ce miniscript en place dans Jimdo :

Etape 1 : récupérer le script

C'est l'étape la plus facile, puisque je vous propose de le télécharger ici :

Le javascript smoothscroll.js
J'ai été obligée de le zipper pour que Jimdo l'accepte. Il suffit de le dézipper (avec Unzip, 7zip, Winrar... ) après le téléchargement pour le déballer :)
smoothscroll.rar
Archive de donnée comprimée 1.8 KB

Etape 2 : charger le script sur le site

Cliquez en mode Admin sur Paramètres > Mise en page personnelle > Fichiers. Chargez dans le dossier smoothscroll.js depuis votre disque dur. Un message vous avertira à la fin que "le fichier a bien été chargé" et il apparaîtra dans la liste :

Screenshot : fichier bien chargé
Le script est chargé

Pour ceux qui sont en mise en page personnelle, il faut valider l'ajout du script en allant dans l'onglet HTML - juste à côté de l'onglet Fichiers dans Paramètres > Mise en page personnelle. En bas, cliquez sur le bouton Enregistrer pour valider les changements :

Screenshot : enregistrer
Appuyez sur [enregistrer]

Pour ceux qui utilisent un template natif de Jimdo, il faut rafraîchir la page, éventuellement vider le cache pour que l'ajout du script soit pris en compte.

Notule d'avertissement

Notez bien que les scripts sont désactivés quand on est en mode Admin ; ils ne fonctionnent qu'en mode Aperçu.

Critiques et commentaires

Écrire commentaire

Commentaires : 78
  • #1

    Arezki Mensous (lundi, 09 mars 2009 16:57)

    Merci pour le tutoriel, en bas à droite ,l'ascenseur me tombe juste sur connexion-aperçu.
    Comme je suis nul en codage , je souhaite un retrait vers la gauche, comment je mettrai les px.
    Cordiales salutations

  • #2

    Isabelle (lundi, 09 mars 2009 20:21)

    Bonsoir !

    Je viens de lire votre source-code et il affiche un code incorrect. Revoyez les liens des images qui sont erronés, ce qui empêche l'affichage des flèches. Pour décaler vers la gauche, il faut jouer avec la marge droite "right: 55px;" par exemple. (Vous avez sans doute un affichage écran en 1024 px ?)

    Voici le code possible à modifier en fonction de la largeur du retrait que vous voulez :

    <a style="display:scroll; position: fixed; bottom: 5px; right: 55px;" href="#footer" title="Atteindre le bas de la page"><img src="http://www101.jimdo.com/usertemplates/*******/img/arrowdown.gif" alt="Flèche bas" /></a><a style="display:scroll; position: fixed; bottom: 25px; right: 55px;" href="#container" title="Remonter"><img src="http://www101.jimdo.com/usertemplates/*******/img/arrowup.gif" alt="Flèche haut" /></a>
    Bon courage !
    Isa

  • #3

    Arezki Mensous (mercredi, 11 mars 2009 05:52)

    Merci Isab pour votre réponse et pour les efforts consentis à l'amélioration de nos sites.
    Cordiales salutations

  • #4

    tourisme-loisirs-briant (samedi, 21 mars 2009 08:58)

    Bonjour,
    Je ne trouve pas l'adresse des images haut et bas pour les mettre en HTML
    Elles sont où exactement
    Sur mon site ,voir page " Se restaurer.....", il y a bien inscrit Fléche haut et fleche bas mais pas d'images donc mon lien est faux
    Merci pour une aide

  • #5

    Sanchell (mercredi, 25 mars 2009 20:51)

    slt,
    moi je sui hébergés sur un serveur 16 pas 101 comment faire alors? =D

  • #6

    Alain (vendredi, 27 mars 2009 13:14)

    Bonjour Sanchell,
    il te suffit de regarder dans la barre d'adresse de ton naviguateur lorsque tu es connectée en mode admin.Si tu as: http://www.16.jimdo.com/app/******/...alors, dans ce cas tu dois mettre 16 à la place de 101.Je ne vois pas d'autres solutions.Salutations

  • #7

    about-collectif (mercredi, 01 avril 2009 01:01)

    bonjour, nous avons un probleme. En effet, nous avons suivi toute la procédure en modifiant bien tout ce qui nécessitait de l'être à cela prêt que nous avons créé nous mêmes nos gif et qu'il n'apparait sur la page que "fleche du haut" "fleche du bas" là om nous espérions voir nos flèches. Le nom des fichiers ont été vérifiés et retapés à plusieurs reprises. Y aurait-il une explication ?

    Merci beaucoup.

  • #8

    Isabelle (mercredi, 01 avril 2009 15:36)

    Bonjour,

    Je vous ai répondu via le formulaire de contact de votre site.

  • #9

    ritournel (samedi, 04 avril 2009 15:39)

    Bonjour Isabelle,
    Je rencontre le même problème que about-collectif.
    J'ai bien suivi la procédure, mais mes images n'apparaissent pas à l'écran.
    Peux tu m'aider?
    Merci d'avance et bravo pour ton site.

  • #10

    ritournel (samedi, 04 avril 2009 18:27)

    Re-bonjour Isabelle,

    Finalement j'ai bidouillé un peu et j'y suis arrivé.
    Voici ma procédure :
    J'ai publié les deux images sur une page cachée de mon site. Je suis allé chercher leur adresse à l'aide de firebug.
    Une fois copiées, je les ai inséré dans le code widget html.

  • #11

    aBout Collectif (lundi, 06 avril 2009 05:55)

    Merci beaucoup, problèmes résolus. Nous ne saisissons toujours pas quelle donnée varie (au cours de tests avec la même image nous avons eu soit réussite soit échec), mais au final, nous avons ce que nous désirions.

    A bientôt et bonne continuation !

  • #12

    Adri (lundi, 13 avril 2009 21:59)

    Salut, est-ce que c'est possible sur un blog Over-Blog ? (possibilité d'héberger des fichiers). Et connais-tu d'autres adresses pour ce genre de barre ?

    Merci.

  • #13

    Sanchell (jeudi, 16 avril 2009 14:22)

    slt même problème que les deux
    les images n'apparaissent pas à l'écran.
    Peux tu m'aider?
    "fleche du haut" "fleche du bas" merci

  • #14

    Isabelle (vendredi, 17 avril 2009 19:15)

    Mise à jour du tutoriel avec 3 méthodes :
    - une très simple pour grands débutants
    - une simple pour utilisateurs débutants
    - une complexe pour utilisateurs avertis

  • #15

    helkin (dimanche, 19 avril 2009)

    Bonjour,
    J'ai un problème avec le "Bling-Bling", qui vient sûrement du fait que je ne peux pas enregistrer dans l'onglet HTML (comparer à ta capture d'écran mon onglet est vide), et quand j'enregistre ma page disparait. :/
    Y a t'il un moyen de solutionner ça ?
    Merci.

  • #16

    helkin (dimanche, 19 avril 2009 16:39)

    Re,
    En fait j'ai hébergé le fichier SmoothScroll.js ailleur en insérant le code dans paramètres/modifier le head, et ça marche!
    ;)

  • #17

    Isabelle (dimanche, 19 avril 2009 19:17)

    Merci pour le feedback ! J'ai mis le tutoriel à jour à l'instant :-)

  • #18

    elojeiphotomontage (samedi, 09 mai 2009 11:20)

    Bonjour,
    Merci et félicitation pour toute cette aide...J'ai créé mon site jimdo sous internet et pour pouvoir placer l'ascenseur je me suis mise sous firefox, j'ai ensuite suivi votre tutoriel pour chercher l'adrese du répertoire, j'ai rentré les différents codes et enregistré l'image seulement en faisant une erreur de manipulation j'ai effacé la première image qui étais enregistrée dans jimdo(big.gif) je crois... Lorsque j'essaie afficher l'image de fond celà me met
    Not Found

    The requested URL /bg.gif was not found on this server.
    Apache Server at www14.jimdo.com Port 80

    Peut-être pourriez-vous m'aider... Merci
    Cordialement, Myriam

  • #19

    Isabelle (dimanche, 10 mai 2009 11:45)

    Bonjour,

    Le plus simple est de ne pas utiliser la méthode 3 (d'autant que le tutoriel est en construction donc incomplet / imprécis... ) Passez par la méthode 2 plutôt ; les manips sont plus faciles. Par ailleurs, je fait d'avoir effacé l'image native bg.gif de Jimdo n'a aucune incidence sur le fonctionnement de Jimdo, donc pas d'inquiétude... ;-)

    Isa

  • #20

    elojeiphotomontage (dimanche, 17 mai 2009 17:03)

    Grâce à vous j'ai réussi en étant néophyte à installer un acsenceur sur mon site en utilisant la méthode 2. Merci

  • #21

    Victor J (mercredi, 27 mai 2009 11:49)

    La méthode 1 pour les nuls est vraiment nulle: rien ne se passe!

  • #22

    Alain (samedi, 30 mai 2009 22:20)

    Merci methode 3 ok par contre smoothscroll.js ne semble pas fonctionner comme le précise Helkin. Peut-être aurait-il pu préciser les modifications de son HEAD, je suppose qu'il l'a enregistré dans googledoc... Pour l'instant je reste donc bloqué avec des flèches à l'EXTREME DROITE ( grand écran ) quelques peu brutales.
    Merci pour le tuto !!!

  • #23

    Isabelle (lundi, 01 juin 2009 21:29)

    A VictorJ : je ne vois pas de code CSS inséré dans le code-source de votre site. Le problème vient donc de là, à moins que vous ayez effacé le code depuis votre post ?

    A Alain : avez-vous bien **enregistré** l'ajout du script smoothscroll.js comme indiqué dans le tutoriel ? Il n'apparaît pas dans le code-source de votre page, donc je pense que ous l'avez ajouté sans valider. Les flèches sont placées à l'extrême droite avec le code fourni par le tuto, c'est normal. (C'est moi qui ai modifié le code sur mon site pour déplacer les flèches plus près du contenu. Voici pour info le code que j'utilise ici :

    <a style="display:scroll; position: fixed; bottom: 5px; margin:0 -50px; border-bottom:0px;" href="#footer" title="Descendre"><img src="arrowdown.gif" alt="Flèche bas"/></a><a style="display:scroll; position: fixed; bottom: 25px; margin: 0px -50px; border-bottom:0px;" href="#container" title="Remonter"><img src="arrowup.gif" alt="Flèche haut"/></a>

    Vous pouvez vous en inspirer pour déplacer les flèches à otre convenance.

    Isa

  • #24

    steph-jan (mardi, 02 juin 2009 09:43)

    Bonjour,

    En tant que novice de jimdo, j'ai essayé la méthode 1. Malheureusement l'erreur suivante apparait lors de l'insertion du code:

    "Le code que vous avez entré comporte des erreurs de javascript ou bien induit des erreurs dans notre système. Souhaitez-vous quand même l'enregistrer? (1):
    1 Message: missing ; before statement
    Script: http://www15.jimdo.com/app/660810/265863717/
    Line: 418"

    Que faire?
    Jan

  • #25

    Isabelle (mardi, 02 juin 2009 19:19)

    Bonjour,

    Le problème peut se poser si vous insérez des scripts sur votre page (ce qui est votre cas : cf. widget météo en page d'accueil). C'est de là que vient le message. J'ai un message du même genre qui s'affiche en admin seulement, mais pas en mode "aperçu" donc je ne m'en inquiète pas.

    Voici le code à entrer dans votre cas (votre template est légèrement différent) :

    <!-- code flèche bas -->
    <a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#contentfooter" title="Atteindre le bas de la page"><img src="http://img411.imageshack.us/img411/5653/arrowdown.gif" alt="Flèche bas"/></a>
    <!-- code flèche haut -->
    <a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#container" title="Remonter"><img src="http://img208.imageshack.us/img208/5130/arrowup.gif" alt="Flèche haut"/></a>

    Une fois encore, ce n'est pas ce code CSS qui induit l'erreur javascript.

    Bien cordialement,

    Isa

  • #26

    steph-jan (mercredi, 03 juin 2009 10:57)

    Merci!

    Ca marche...

  • #27

    Jean Paul Ziégler (lundi, 22 juin 2009 17:19)

    Merci! cela marche.
    J'aime les ceintures + bretelles dans le domaine des codes.
    J'avais recopié le HTML et le CCS dans un fichier "boc-notes"

    Pour le N° de serveur il est identifiable dans l'adresse du site dès que l'on passe en mode modification il se situe dans l'adresse affichée entre:
    http://www
    et
    .jimdo.com

  • #28

    Paulo (jeudi, 02 juillet 2009 13:32)

    ça cest vraiment bien, salutations

  • #29

    angehell (jeudi, 09 juillet 2009 10:34)

    Bonjour et merci pour tous ces bons conseils!!

    Mon souci à moi, c'est que la flèche du haut marche très bien et toujours..Mais la flèche du bas marche ponctuellement, en fait, elle va fonctionner une fois et ensuite plus rien...Je n'arrive pas à modifier ça...

    Merci pour votre aide!!

  • #30

    angehell (jeudi, 09 juillet 2009 10:35)

    Ps : j'ai utilisé le deuxième tuto si jamais

  • #31

    pictoo (jeudi, 09 juillet 2009 14:18)

    Bien utile ce petit ascenseur.

    Merci beaucoup, ce site est très très utile ;-)

    Matt.

  • #32

    animalim (jeudi, 23 juillet 2009 20:02)

    bonjour Isabelle,

    dis j'ai un petit soucis avec le bling-bling, j'ai bien extrait le fichier.rar, je l'ai téléchargé sur mise en page personnelle, ensuite je fais enregistrer sous HTML comme tu le dis (<var>content</var> <var>sidebar</var> <var>navigation[1|2|3]</var> <var>footer</var> => c le code qui apparait dans le HTML), mais là, après ça m'enlève ma mise en page, pourtant mes flèches sont là et marche mais pas avec le bling bling lent...
    heu, là je suis bloquée, je ne vois pas où ça cloche...
    merci de ta réponse !
    Delphine

  • #33

    latoileapart (mardi, 11 août 2009 00:50)

    et bien voilà je ne voulais pas me jeter à l'eau , mais ça me dit d'aller y faire quelques brasses dans ce ce bouillon d'HTLM

    merci

  • #34

    lesfinsdeseries (lundi, 05 octobre 2009 14:33)

    Pourquoi mes fleches ne s'affichent pas. Au lieu il y a marque fleche du haut et fleche du bas ?? ?

  • #35

    c-prim (mardi, 08 décembre 2009 18:08)

    Bonjour Isabelle,

    Merci pour ton site qui est vraiment génial! Mais, il y a un mais, encore faut-il que les utilisateurs soient géniaux, et là c'est pas gagné...

    A vrai dire, j'ai le même problème que lesfindeseries, si ce n'est que mes flèches apparaissent nickel mais les mots "Flèche haut" et "Flèche bas" aussi... Je n'arrive pas à les enlever même en supprimant la valeur "alt"

    Damned!

    Merci d'avance

  • #36

    coccinel75 (dimanche, 13 décembre 2009 22:23)

    Bonjour Isabelle, et tout d'abord merci pour tes tutoriels qui m'ont permis, moi tout à fait novice, d'agrémenter un peu mon site de façon plus personnelle.

    Néanmoins, alors que j'avais installé un ascenseur qui fonctionnait parfaitement bien, je m'aperçois aujourd'hui "qu'il est en panne"... Les images sont bien affichées, les sous-titres aussi, mais rien de se passe lorsque je clique dessus.

    Je n'ai fait aucune modification sur mon site récemment...(je ne touche d'ailleurs pas au HTML ou CSS, car je n'y connais rien) Donc je ne comprends pas ce qui se passe...

    J'ai supprimé le script, et j'ai recommencé à zéro, mais toujours rien...
    Peut-être saurais-tu me dire ce qui ne va pas ?

    Merci pour tout encore une fois.

    Coccinel75

  • #37

    Sandrine (mercredi, 23 décembre 2009 20:57)

    Bonjour Isabelle,
    En fait je suis un peu comme Coccinel75. J'avais installé un ascenceur (manip n°2)qui fonctionnait très bien. Un jour celui ci est tombé en panne. Du coup j'ai refait toutes les manipulations, restées sans effet.
    1.J'ai recommencé la manip du cache
    2. Celle du téléchargement des images
    3. et tenté de réinstallé le script

    J'ai même tenté de faire la troisième manipulation (plus complexe) j'ai réussi à obtenir l'adresse de mon répertoire d'image (que j'ai noté sur mon pc). J'ai également installé le fichier "smoothscroll" pour le défilement doux

    Bref même celle ci ne fonctionne pas, dommage je trouvais ce principe très sympa.

    Existe t il une raison à cela ? Je pense avoir fait les choses correctement mais étant novice j'ai peut être fait une erreur.

    Merci de m'aider
    Sandrine

  • #38

    scaristanllamas (mardi, 12 janvier 2010 14:50)

    je viens d'installer l'ascenseur. ça baigne.
    je continue à explorer ton site qui est très utile et pédagogique.
    merci

  • #39

    lesalpagesdechatel (dimanche, 17 janvier 2010 14:00)

    methode 3
    Pourquoi mes fleches ne s'affichent pas. Au lieu il y a marque fleche du haut et fleche du bas ?? ?
    comment les enlever ? le widget n'apparait plus comment les supprimer ?

  • #40

    phg-jardinsecret (dimanche, 31 janvier 2010 23:31)

    J'ai choisi la méthode 1 mais les flèches haut et bas ne fonctionnent pas. J'ai donc copié le script du post #25 mais il n'y a que la flêche bas qui fonctionne... Pouvez-vous m'indiquer où se trouve l'erreur et m'aider ^_^. Merci !

  • #41

    Sandrine (mercredi, 03 février 2010 13:09)

    Bonjour,
    Si quelqu'un peut m'aider ce serait super sympathique de sa part, je n'ai pas obtenu de réponse à ma question du 29 décembre. Help please... et merci d’avance ;-)
    A toute fin utile je joins ci-dessous le code inséré, j’ai du faire une erreur mais où…

    <!-- code flèche bas -->
    <a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#footer" title="Atteindre le bas de la page"><img src="http://img411.imageshack.us/img411/5653/arrowdown.gif" alt=
    "Flèche bas" /></a>
    <!-- code flèche haut -->
    <a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#container" title="Remonter"><img src="http://img208.imageshack.us/img208/5130/arrowup.gif" alt="Flèche haut" /></a>

  • #42

    sara99 (jeudi, 25 février 2010 18:20)

    Bonjour,
    j'ai bien installé le petit ascenseur selon la méthode 3, il est bien présent mais rien ne bouge, le script est sous la pub Jimdo.

    Autre question est-il possible d'ajouter un bloc au dessus de la pub Jimdo.

    Merci et salutations,

    Votre site est fantastique :-)

  • #43

    c-facile (vendredi, 19 mars 2010 00:16)

    Bonjour Isa =D J'adore ton site ...
    Je suis un gars de 18 ans et je comprend absolument rien au HTML et CSS j 'aimerais customisé un peu mieux mon site =) parce que en ce moment je change toutes les minutes ^^
    J'ai installé l'ascenseur et les images et le rôle de ces boutons fonctionnent par contre pas le fichier smoothscroll ^^ donc je me demandais si tu pouvais me réexpliquer comment on fait pour que le défilement devienne plus ... "doux" !
    Marci pour ton aide ,

    Hugo

  • #44

    crazy-easy (samedi, 20 mars 2010 02:46)

    Bonjour Isa =D J'adore ton site ...
    Je suis un gars de 18 ans et je comprend absolument rien au HTML et CSS j 'aimerais customisé un peu mieux mon site =) parce que en ce moment je change toutes les minutes ^^
    J'ai installé l'ascenseur et les images et le rôle de ces boutons fonctionnent par contre pas le fichier smoothscroll ^^ donc je me demandais si tu pouvais me réexpliquer comment on fait pour que le défilement devienne plus ... "doux" !
    Marci pour ton aide ,

    Hugo
    PS: J'ai refait mon site voila pourquoi je t'ai écrit deux fois

  • #45

    kevin (mardi, 30 mars 2010 22:01)

    bonjour a tous !!! j'ai un problème avec mon site... je fait toutes les manips pour insérer l'ascenseur mais sa ne fonctionne pas... les flèches sont bien la, mais ne font aucun changement... =(
    quelqu'un pourrait m'aider svp ???

  • #46

    Aurélien (dimanche, 02 mai 2010 18:19)

    Merci beaucoup !!

  • #47

    welcom75 (mercredi, 05 mai 2010 13:01)

    Mince je suis vraiment nul apres plusieurs essais ça ne marche pas j'ai qu'une seule flêche et en plus carrement a la droite de l'écran

  • #48

    welcom75 (mercredi, 05 mai 2010 15:16)

    voila ce que je met avec la methode N°2
    si quelqu'un voit le beug

    <!-- code flèche bas -->
    <a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#footer" title="Atteindre le bas de la page">
    <img src="adresse_de_la_flèche_bas" alt="Flèche bas" />
    </a>
    <!-- code flèche haut -->
    <a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#container" title="Remonter">
    <img src="http://www32.jimdo.com/app/sfb2e46fb256e475a/p5c6db3c3500fcc8b/#" alt="Flèche haut" />
    </a>

  • #49

    gite-panda-thierache (jeudi, 10 juin 2010 14:31)

    Bonjour,

    Je voudrais que l'un des éléments de mon menu de navigation envoie sur un lien externe plutot que sur une page interne du site ; exemple, si on clique sur le lien "disponibilités" du menu de navigation, on arrive sur le planning de mon gite qui est sur le site des gites de france de mon département.
    Possible ?
    merci d'avance
    JMG

  • #50

    espace-saint-georges (mardi, 29 juin 2010 19:05)

    Bonjour
    J'ai mis en place l'ascenceur avec la deuxiéme solution c'est trés opérationnel!!
    merci beaucoup pour ce tuto
    Votre site est plein de trésors..une vraie caverne d'Alibaba
    Bonne continuation

  • #51

    Beltàchjara (vendredi, 30 juillet 2010 18:37)

    Bonjour,

    Je viens d'installer l'ascenseur, j'ai également utilisée la méthode 2. Merci pour ce tuto.

  • #52

    AMAO NORENE (mercredi, 11 août 2010 17:10)

    SOS.

    En fait j'ai tente de placer des ascenseurs sur mon site, malheureusement cela n'a pas marche. les fleches apparaissent mais ne fonctions pas. je tente de les supprimer mais impossible.

    j'ai tente les methodes 3 et 1...

    Merci de votre aide
    www.letemoin.org

  • #53

    AMAO NORENE (jeudi, 12 août 2010 00:50)

    j'ai essayer toutes les méthodes, aucune n'a marche sur mon site.
    www.letemoin.org.
    De plus je tente de supprimer ces flèches statiques qui apparaissent au bas droit de mon site, impossible. besoin d'aide...
    siteletemoin@gamail.com

  • #54

    PALLAS (mardi, 12 octobre 2010 10:27)

    merci, merci, merci !!!

  • #55

    contact75 (vendredi, 14 janvier 2011 16:51)

    Bonjour,
    Je vous félicite pour le travail accompli sur votre site internet.
    J'ai suivi vos explications pour mettre en place un ascenseur,
    mon problème est que lorsque l'on clic dessus, les flèches ne s'exécutent pas.
    Ne serait ce pas un problème de href="#container" ?

    Site web : www.team-kia.com

    Dans l'attente de votre réponse,

    Cordialement

  • #56

    Sébastien (dimanche, 16 janvier 2011 08:30)

    Bonjour contact75,
    J'ai eut le même problème que vous. Essayez peut être avec href="#contentfooter. Pour moi ça fonctionne.

    Cordialement

  • #57

    rando-equestre-oise (jeudi, 20 janvier 2011 22:39)

    Bonjour, J'ai d'abord essayé la méthode 3 (prétencieux l'gars...) frayeur... après avoir enregistré les code CSS & HTML, Surprise... des barres obliques & de moitié de barre verticales... Je me suis donc rabattu sur la méthode 2 & la j'ai bien mes deux flèches atteindre le bas de page & remonter. J'ai changé dans le code le nbr de pixel depuis la droite de 5 à 550px ce qui fait que mes flèches sont plus dans le champs de vision. Il a fallu par contre que j'enregistre mes image sur internet après avoir trouvé leur adresse sur mon disque dur. www.rando-equestre-oise.com. Luc.

  • #58

    rando-equestre-oise (jeudi, 20 janvier 2011 22:49)

    Bonjour Welcom 75,
    Votre problème vient probablmemnt du fait qu'a la ligne "atteindre le bas de page vous n'avez rien changé. En principe si les deux flèches sont au même endroit sur votre disque dur, vous devriez avoir sensiblement la même adresse qu'a la ligne "remonter" pour la flèche du haut. la seule différence entre ces deux ligne devrait alors être le code du fichier de votre image. Luc.

    <!-- code flèche bas -->
    <a style="display:scroll; position: fixed; bottom: 5px; right: 500px;" href="#footer" title="Atteindre le bas de la page"><img src=
    "http://u.jimdo.com/www32/o/s41dd000000e773c/img/i4d3cefeac23e1567/120077007707/std/bas.jpg" alt="Flèche bas" /></a> <!-- code flèche haut -->
    <a style="display:scroll; position: fixed; bottom: 25px; right: 500px;" href="#container" title="Remonter"><img src=
    "http://u.jimdo.com/www32/o/s41dd000000e773c/img/i4d3cefeac23e1567/120077007707/std/bas.jpg" alt="Flèche haut" /></a>

  • #59

    Hans (dimanche, 23 janvier 2011 22:27)

    Super merci.
    J'ai choisi la 2è méthode.

  • #60

    nariasound (dimanche, 30 janvier 2011 21:25)

    Bonjour.

    J'ai installé les ascenseurs avec la méthode 1 (Et oui, je suis un flemmard), et ceux-ci marchent très bien.

    Mon seul petit hic est pour le défilement "bling-bling". J'ai bien installé le script, rafraichis la page, vidé le cache, rien ne se passe Je n'utilise pas de design personnel mais un design special.

    Si quelqu'un à la solution à mon problème, merci.

  • #61

    Nathalie (mercredi, 02 février 2011 18:32)

    Bonjour,
    Pour une manipulation facile (débutant) j'avoue que je suis sans doute plus débutante que les débutants. Je n'arrive pas à faire fonctionner la première méthode de mon ascenseur. J'ai juste copier-coller le code mais rien ne se passe. Et en mode affichage apparait (sur un exemple de page de mon site) : http://www.lc2n.com/mes-créations/boucles-d-oreilles/#container pour haut de page et http://www.lc2n.com/mes-créations/boucles-d-oreilles/#footer pour bas de page. SI quelqu'un peut m'aider, ce serait très sympa !
    Cordialement.
    Nathalie

  • #62

    lithops-master (vendredi, 18 février 2011 19:26)

    Bonjour,

    Après avoir essayé la méthode 2... en vain, j'ai essayé la méthode 1... en vain. Existe-t-il une méthode 0? Plus sérieusement, les flèches sont bien là mais lorsque je clique dessus, il ne se passe rien. Faut-il leur parler également?
    Merci de votre aide.

  • #63

    seb (vendredi, 25 mars 2011 17:11)

    Bonjour, j'ai utilisé la méthode 2. Les flèches s'affiche comme prévu, mais ne répondent pas. J'ai déjà fait la manip 3 fois mais rien n'y fait.
    Quand je clique dessous il y a juste un petit encadré rouge en pointillé autour de la flèche.
    Pouvez-vous m'aider svp!

  • #64

    outilswebdesign (vendredi, 15 avril 2011 13:27)

    Pour info dans le fichier js vous pouvez changer la vitesse en changeant le "ss.STEPS = 25;" qui se trouve en bas du script, plus vous allez vers 100 plus le défilement et lent et inversement.

    Bonne journée

  • #65

    asca-chorales-alsace (samedi, 07 mai 2011 23:09)

    je suis totalement nul en HTML. Je débute dans la gestion de site avec jimdo. J'ai essayé de suivre les instructions et maintenant j'ai 2fois les flèches haut et bas. Une fois en image et l'autre fois avec une petite croix rouge. J'aimerai simplement pour l'instant supprimer ces image et je n'arrive plus à faire marche arrière. comment faire?
    Merci d'avance pour la réponse

  • #66

    Isabelle (dimanche, 08 mai 2011 08:50)

    Bonjour,
    Il suffit de vous connecter sur votre site Jimdo et, en mode administrateur, de cliquer en bas de la colonne de gauche, sous la newsletter, à l'endroit où vous avez inséré les deux flèches. Le code apparaît. A partir de là, deux options :
    - enlever tout en cliquant sur l'icône de la poubelle
    - corriger le code : vous avez oublié d'écrire dans le code les adresses des images !... C'est donc bien normal qu'elles n'apparaissent pas... Je vous recommande donc de vous simplifier la vie : copiez-collez le code n°1, celui qui est prêt à l'emploi :

    <!-- code fleche bas -->
    <a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#footer" title="Atteindre le bas de la page">
    <img src="http://img411.imageshack.us/img411/5653/arrowdown.gif" alt="Flèche bas" />
    </a>
    <!-- code fleche haut -->
    <a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#container" title="Remonter">
    <img src="http://img208.imageshack.us/img208/5130/arrowup.gif" alt="Flèche haut" />
    </a>

    Validez et cela fonctionnera.

    Cordialement,

    Isa

  • #67

    fr-flightnet (mercredi, 18 mai 2011 23:19)

    Bonjours j'ai installer l'ascenceur avec le js mais commetn je fait pour activer le fichier ?

  • #68

    Marie (mardi, 08 novembre 2011 13:50)

    Bonjour,

    Je souhaiterais changer l'image de mes flèches, mais voilà pas moyen de remettre la main sur le bloc widget/html... Sauriez-vous comment faire pour le retrouver?
    Merci d'avance pour votre aide. :)

  • #69

    Marie (mardi, 08 novembre 2011 14:55)

    C'est bon j'ai fini par le retrouver... c'est que c'est tout petit et invisible ce truc! ^^'

    En tout cas merci pour votre site rempli d'infos sympas! :)

  • #70

    Lau (mardi, 29 novembre 2011 20:06)

    Un grand merci, c'est tout simple si on suit bien les instructions! J'avais d'abord inversé les deux flèches mais j'ai tout recommencé et ça marche! (méthode N°2)

  • #71

    quebecetongles (vendredi, 09 mars 2012 15:53)

    Bonjour,
    Je ne comprends pas.
    Pas moyen de faire fonctionner cet ascenseur dans http://quebecetongles.jimdo.com avec plusieurs scripts différents.
    Finalement, je copie le code de mon autre site (balade-lausanne.com) qui fonctionne, lui...sans plus de succès!
    C'est grave docteur?

  • #72

    sitadel (mercredi, 14 mars 2012 15:33)

    Il n'y a plus de support?

  • #73

    lion29 (mardi, 05 juin 2012 17:27)

    J'ai essaier les deux techniques, les fleches apparaisse mais je ne monte pas et je ne descends pas ! HELP !!

  • #74

    Jo (lundi, 02 juillet 2012 03:33)

    Merci bien pour ces tutos, mon ascenseur fonctionne bien sans jamais tombé en panne.
    Bonne continuation.

  • #75

    Wesh Conexion (mardi, 03 juillet 2012 14:02)

    Bonjour, j'ai installé l’ascenseur avec la méthode 1 et les codes de templates récents et la flèche du haut fonctionne mais pas celle du bas, vous savez pourquoi ?
    Je ne l'ai esté que sur une des pages du site (http://www.weshconexion.com/photo/walls-conexion/melbourne/)
    Merci à vous

  • #76

    Wesh Conexion (mardi, 03 juillet 2012 14:13)

    (désolé pour ce double post) Je viens de tester la méthode 2 (que je préfère) et le problème reste le même.

  • #77

    Isa (admin) (mardi, 03 juillet 2012 14:35)

    Bonjour Wesh Conexion,

    Je pense que Jimdo a encore changé les noms des classes des templates... Je viens de regarder votre source. Dans le code de la méthode (2), remplacez "#cc-tp-footer" par "#cc-tp-content-btm" ou par "#contentfooter".

    Keep me in the loop ;)

    Isa

  • #78

    Wesh Conexion (jeudi, 05 juillet 2012 00:50)

    Merci pour ce nouveau code, ça fonctionne bien.
    Mais Jimdo change souvent les noms des classes des templates ?
    A un prochain tuto ;)

Ruban