[Do it toi-même] Un bouton de retour en haut de page

♫ Aller plus hauuuuuuut ♫
♪ Aller plus hauuu-BANG!

Avant toute chose, sache que je suis une quiche en code (code HTML j'entends, le code de la route...bah je suis une quiche aussi). Donc je ne pourrais être tenu responsable en cas de combustion spontanée de ton blog.

Pleiiiin de gens m'ont dit "Mais wouaw! Ton ascenseur là pour revenir en haut de la page c'est complètement magnifique! Quelle merveilleuse et brillante idée!"

(...)

Bon en fait, une seule personne me l'a dit...et pas tout à fait de cette manière mais BREF! (merci Élodie ;) ).

Je voulais donc un bouton image qui nous ramène en haut de la page, je voulais aussi qu'il soit un peu personnalisé et qu'il y ait un effet quand on passe la souris dessus (là, il glisse légèrement vers le haut).
Chiante moi? Oh que oui!
J'ai donc mixé plusieurs tutos, inspecté des codes source d'autres blogs, enlevé des chiffres, ajouté des points virgules...et j'y suis arrivée!

C'est parti...

(Je suis sur Blogger, mais ça doit être adaptable, sur d'autres, à partir du moment où tu as accès au code)

D'abord, tu choisis l'image que tu veux utiliser, moi j'ai choisi un ascenseur parce que je trouvais ça marrant (←bon public inside), mais ça peut être une flèche classique, des escaliers, une échelle, une fleur, un flingue, un membre du corps (...), ce que tu veux quoi, suffit juste que tu ais l'image.
J'ai trouvé la mienne sur Openclipart, elles sont dispo au format .svg et donc éditables, directement depuis Openclipart en plus. Mais on enregistrera l'image finale au format .png, c'est plus mieux.

Je m'excuse par avance de la qualité presque abominable de mes captures d'écran, enjoy!

Etape 1 : Sauvegarde du blog

(en cas de désintégration inopinée)

Dans ton tableau de bord, tu cliques sur Modèle, puis Sauvegarder/Restaurer

Et 'Enregistrer le fichier'.

Étape 2 : Le code Javascript/HTML

Toujours dans ton modèle, Modifier le code HTML :

Tu cliques dans le champ de texte puis fais 'Ctrl+F', dans la case qui s'affiche tu cherche la balise

</body>

puis 'Entrée'

Juste avant cette balise on colle ce code javascript :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});

jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

Et le code HTML en suivant :

<a class='backtotop' href='#'><img src='URL DE TON IMAGE'/></a>

À la place du texte en rouge tu colles l'adresse url de ton image.
Que tu auras hébergé sur HostingPics par exemple, ou sur ton blog directement.
Sur Blogger tu peux t'affranchir d'un hébergeur d'images en créant un brouillon d'article et en y insérant les images à stocker dedans (comme tu le fais habituellement en écrivant un article, sauf que tu ne publies pas ce brouillon). Tu cliques droit sur l'image 'Copier l'adresse du lien' et voilà tu as l'URL de ton image, qui est hébergé directement chez toi (chez Blogger), et donc techniquement c'est plus pratique.

Étape 3 : Le code CSS

Maintenant le CSS (pour la mise en place et les effets de survol) :
Dans le champ de recherche ('Ctrl+F') on va chercher ça :

]]></b:skin>

(c'est pour Blogger, pour les autres je crois qu'il y a des feuilles de style éditables)

Juste avant ce code, on colle ceci :

/** Back to top **/
.backtotop {
position: fixed;
right: 50px;
bottom: 20px;
}
.backtotop:hover {
-webkit-transition: all 0.3s ease; transition: all 0.3s linear;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
}

Explications :
La partie .backtotop, c'est pour définir la position de ton image dans la page.
Ici elle est à 50 pixels du bord droit et 20 pixels du bas de ma page; position: fixed c'est pour qu'elle reste dans cette position quelque soit l'endroit où on est sur la page. Comprendouf? Non? Pas grave...

La partie .backtotop:hover, c'est l'effet qu'on veut donner à l'image, au survol de celle-ci.
Ici elle glisse vers le haut de 10 pixels (sur l'axe Y, verticalement donc), tu peux modifier les valeur pour la faire aller plus hauuuuuuuut! (chut), ou même aller vers le bas (en y insérant des valeurs positives), à gauche ou à droite (en remplaçant les Y par des X).

Le -webkit-transition c'est pour faire un mouvement plus ou moins fluide, tu peux modifier les valeurs aussi (plus les chiffres seront élevés, plus le mouvement sera lent).

Si tu veux que l'image tourne sur elle-même (sympa si ton icône est ronde), tu peux remplacer les transform:translate par :

transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);

360 degrés, c'est pour un tour complet, tu peux évidemment modifier cette valeur.

Va faire un tour sur CSS3maker où tu pourras tester plein d'effets CSS et obtenir les codes à coller dans ton modèle.
Tu peux aussi mettre plusieurs effets à la fois, mais gare à la gerbe!

Et pour faire un bouton personnalisable, sans image, simplement du texte et une bordure ?

Tout pareil pour le Javascript et on remplace le code
<a class='backtotop' href='#'><img src='URL DE TON IMAGE'/></a>
par
<a class='backtotop' href='#'>Aller plus hauuuuut!</a>
(tu remplaceras bien sûr le texte en rouge par celui de ton choix, ou pas).

Et pour le CSS, tu remplaces celui d'en haut par :

.backtotop {
position:fixed;
background :#626262;      /* couleur du fond */
border:2px solid #000000; /* taille et couleur de la bordure */
color: #ffffff !important;/* couleur du texte */
width:135px;              /* taille du bouton */
padding: 12px;             
right:30px;               /* position sur la page */
bottom:35px;
text-align: center;
}
.backtotop:hover {
background :#000000;      /* couleur de fond au survol */
border:2px solid #626262; /* couleur et épaisseur de la bordure au survol */
color :#ffffff !important;/* couleur du texte au survol */
}

Note : Les commentaires entre les /*  */ sont là pour servir de repère et t'aider dans les modifications, et tu peux les coller dans ton code sans souci.

Pour des bords arrondis on ajoute dans .backtotop :

-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;

Ça peut donner ça :

Ou ça, si tu as du gout :




Et tu modifies à ta guise, les couleurs (#xxxxxx), les pixels (px), ajout d'un effet tout ça tout ça... Pour trouver le code couleur dont tu as besoin c'est là : Code-couleur.

Voilà! Si tu as des questions, n'hésite pas, mais il est fort probable que je ne sache pas y répondre! Mouhahaha! Quiche moi? Oh que oui!