Installer un retour en haut de page

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.
Ce tutoriel est recommandé aux Jimdonautes qui n'ont pas pu faire fonctionner le double ascenseur de ce tutoriel (v. 1) ! Vous pouvez aussi installer la nouvelle version (v. 2) de cet ascenseur détaillée dans ce tutoriel.

Ce tutoriel vous explique comment installer sur votre site Jimdo une flèche très discrète pour permettre à vos visiteurs de remonter en haut de la page, vers votre menu principal, en un seul clic. Contrairement à l'ascenseur de ce tutoriel, la méthode exposée ici est universelle, c'est-à-dire qu'elle fonctionnera avec tous les templates de Jimdo, car elle fait appel à de très légers scripts en Jquery et non à des classes CSS qui, hélas, peuvent varier d'un template à un autre. Bref, si l'ascenseur de ce tutoriel ne fonctionne pas sur votre site, rabattez-vous sur la flèche du présent tutoriel : elle fonctionnera à coup sûr !

Démonstration

Vous trouverez une démonstration de cet ascenseur sur mon site d'essai. Notez que :

  • La flèche est d'abord invisible : elle n'apparaît graduellement que quand on fait défiler la page vers le bas (donc seulement quand la remontée en haut de page devient nécessaire). De ce fait, le site n'est pas encombré lors du premier affichage.
  • Une petite coquetterie graphique : l'image de la flèche se modifie légèrement quand on la survole avec la souris.
  • Surtout, ce script (contrairement à celui de l'ascenseur double) fonctionnera avec tous les templates de Jimdo, puisqu'il ne fait appel à aucune classe CSS spécifique.

 

Démonstration de la flèche de retour vers le haut
Elégante flèche de retour vers le haut
Flèche vers le haut

Installation pas à pas

L'installation de cet ascenseur est simplissime. En effet, j'ai chargé l'image et les scripts nécessaires chez Archive-Host. Vous n'avez donc plus qu'à copier-coller les codes fournis sans y porter aucune modification.

Où installer les codes ?

Tout se passe dans la fenêtre de saisie accessible dans Paramètres > Modifier le head :

 

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

Insertion des scripts

Copiez-collez le code ci-dessous, sans rien modifier, dans la fenêtre de saisie :

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

<script src="http://sd-1.archive-host.com/membres/up/3347790973941088/easing.js" type="text/javascript">
</script>

<script src="http://sd-1.archive-host.com/membres/up/3347790973941088/jqueryuitotop.js" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[
                $.noConflict();
                jQuery(document).ready(function() {
                jQuery().UItoTop({ easingType: 'easeOutQuart' });
 });
//]]>
</script>

Ajout de l'image et de la CSS

Copiez-coller le code suivant sous le code précédent, sans faire de modification :

<style type="text/css">
/*<![CDATA[*/

/*
--------------------------------------------------------------------------
UItoTop jQuery Plugin 1.1
http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
--------------------------------------------------------------------------
*/

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:20px;
right:20px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/uitotop.png);
background-repeat: no-repeat;
background-position: left top;
z-index: 900000;
}

#toTopHover {
background:url(http://sd-1.archive-host.com/membres/images/3347790973941088/uitotop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
outline:none;
}

/*]]>*/
</style>
N'oubliez pas d'appuyer sur le bouton Enregistrer pour sauvegarder vos modifications !

Passez enfin en mode Aperçu : vous verrez la flèche noire *magically* apparaître dans le coin inférieur droit de votre page.

 

Et vous, vous l'utilisez ?

Écrire commentaire

Commentaires : 15
  • #1

    De wilde (vendredi, 27 juillet 2012 19:40)

    Bonsoir et merci pour toutes vos explications.
    Un site très bien conçu !

  • #2

    Taduprog (mardi, 07 août 2012 11:51)

    Merci pour ce tuto qui en l'adaptant, nous a servi pour le mettre en place sur notre site.

  • #3

    La Conf' (mercredi, 05 septembre 2012 15:00)

    merci c top

  • #4

    badalsb (mardi, 09 octobre 2012 21:03)

    Excellent et surtt utile pour notre site chargé !
    Et très simple de mise en oeuvre
    Merci

  • #5

    schiffler (mercredi, 10 octobre 2012 12:57)

    merci pour ce tutotriel mais est il possible de bouger de place cette fleche ?

  • #6

    Isa (admin) (mercredi, 10 octobre 2012)

    Oui, en modifiant les valeurs du code suivant :

    #toTop {
    }

    Changer :
    bottom: 20px;
    right: 20px;

    Attention des connaissances en CSS sont nécessaires pour ajuster les valeurs. Sinon, procédez par tatonnements en modifiant la valeur en pixels.

    Cordialement,

    Isa

  • #7

    Adeline (mercredi, 13 février 2013 08:20)

    Merci beaucoup Realia ou Isa,

    j'avais essayé l'autre ascenseur sans succés.

    J'ai maintenant une jolie flèche qui remonte fièrement en bas de mon texte.
    Par contre, comment dois-je faire pour retirer l'ancien ascenseur qui est au bas de la page, mais qui ne sert à rien ?

    Cordialement

  • #8

    lebricabracdesfilles (mardi, 02 avril 2013 18:29)

    Quelle est le code pour le mettre dans la catégorie choisie ?

  • #9

    Isa (mardi, 02 avril 2013 18:32)

    @lebric... : Euh... quelle catégorie ? Je ne comprends pas la question. Merci de préciser.

  • #10

    Abdessamade BAYROUNE (dimanche, 21 avril 2013 03:33)

    i'dont understand

  • #11

    Pascal (dimanche, 02 juin 2013 07:42)

    Les flèches ou boutons HAUT et BAS sont absolument inutiles sur une page web! En effet, elles font double emploi avec les fonctionnalités incluses dans tous les navigateurs. C'est comme porter ceinture et bretelles. Sur tous les navigateurs vous avez des barres de défilement. Cliquez en haut de la barre pour accéder instantanément au haut du document; idem pour le bas.

  • #12

    Electr0HD (dimanche, 14 juillet 2013 21:49)

    Comment télécharger le plugins ?

  • #13

    Isabelle (vendredi, 19 juillet 2013 14:06)

    @ElectrOHD : je ne comprends pas de quel plugin vous parlez ? En relisant le tutoriel, vous verrez qu'il ne s'agit que de codes à copier-coller et insérer aux bons endroits dans Jimdo. Bon courage !

  • #14

    Pauline (dimanche, 10 novembre 2013 00:51)

    Bonjour,
    Le code marche nickel sur blogger, c'est génial ! Par contre, une question :
    Peut-on modifier la flèche noir "par defaut" par une autre image (une flèche que j'ai trouvé).
    Merci d'avance !

  • #15

    Isabelle (lundi, 20 janvier 2014 14:44)

    @Pauline : oui, on peut changer d'image. Il suffit de modifier l'adresse URL de l'image dans le code avec l'adresse de votre image hébergée sur Imageshack ou Archives-Host par exemple :

    background-image: url(ici adresse de votre image) à deux endroits dans le code

    Modifiez aussi au besoin les lignes "width" et "height" avec la taille de votre nouvelle image en pixels.

Ruban