Attention, ce tuto est accessible seulement si vous êtes en mode avancé, donc, déconseillé aux novices!

Avant toutes choses, sauvegardez chaques pages html au cas où vous auriez raté un truc et que vos page soient destructurées!

C'est quoi un bouton retour haut de page?FLECHE-NOIRE
C'est un bouton, image, texte qui apparaît lorsque l'on scroll la page web!
Bon le mieux, c'est de regarder sur la page, descendez à peine avec la barre de défilement jusqu'a voir cette image apparaître en bas à droite!, ça à l'air de ça :

Et si vous passez la souris, vous verrez ça :Sans-titre---2

 

 

La première chose à faire, c'est soit créér une image de 50 à 80 pixels environ de large, ou alors enregistrer les 2 images du dessus. Vous devez ouvrir un nouveau message, les charger à la taille original et enregistrer le message en brouillon.

Pour ce tuto, on va avoir besoin de 2 parties de code, l'un est un script en javascript, (l'avantage, c'est que vous n'aurez que le copier/coller sans rien toucher!) et la 2éme partie est un code en CSS qui sera à ajouter sur la feuille de style.

Avant toutes choses, sauvegardez chaques pages html au cas où vous auriez raté un truc et que vos page soient destructurées! Vous devez faire la même opération pour toutes les pages, accueil, archives, messages, .....

1ére partie : La partie du script à copier et à coller dans vos pages est à télécharger ICI
Vous devez copier et coller ce code en totalité entre le head

2éme partie : La partie du code à copier et à coller dans votre page "feuille de style", tout en bas fera l'affaire!
Pensez avant à sauvegarder votre page de code CSS, au cas où!

Mais avant, il vous faut changer l'adresse d'hébergement de chaque image par la votre, la 1ére image correspond à l'image qui s'affiche sans passer la souris dessus.
La seconde image correspond à l'image lorsque l'on passe la souris dessus!

---------------------------------------
/*----début retour haut de page-----*/

/** ScrollToTop **/
#scrollToTop a{
position: fixed;
background: #fff url("adresse de votre image") no-repeat ;
right: 20px;
bottom: 10px;
background-color: rgb(255,255,255); /** rgba fallback**/
background-color: rgba(255,255,255, 0.0);
padding: 60px 40px;
}
#scrollToTop a:hover{
background: #fff url("adresse de votre image") no-repeat ;
background-color: rgb(255,255,255); /** rgba fallback**/
background-color: rgba(255,255,255, 0.0);
padding: 60px 40px;
}
/*----fin retour haut de page-----*/
---------------------------------------

Voilà, c'est fini, si tout va bien, en scrollant votre page de blog, vous devez voir en bas, votre bouton "retour haut de page"!
Aprés, si votre bouton est mal placé, où que vous voulez changer son emplacement, vous pouvez jouer sur les valeurs du code CSS :
right: 20px;
bottom: 10px;