Flèches monter / descendre

Bonjour ! Petite astuce pour mettre des flèches qui vous permettront de monter ou de descendre plus rapidement de votre page. Le code est en deux parties, une HTML et une CSS.

Partie HTML.

<p><a title="#footer" href="#footer"><img id="id1" src="FLÈCHE BAS.PNG" alt="" /></a> <a title="#top" href="#top"><img id="id2" src="FLÈCHE HAUT.PNG" alt="" /></a></p>

Ce code HTML est à coller dans le code source (<>) d'un module simple, ou dans les statistiques, ça marche aussi.

• En rouge: les identifiants, j'ai noté id1 et id2, vous pouvez changer, mais dans ce cas, il faudra noter ces mêmes identifiants dans le code CSS plus tard.
• En rose: adresses URL de vos images (flèches), une qui part vers le bas et l'autre vers le haut.
• En vert: le titre / nom qui apparaîtra au survol de l'image (vous pouvez noter ce que vous voulez "monter", "top"...).

Partie CSS.

#id1{position: fixed;
    right: 5px;
    bottom: 10%;   }
   
#id2{position: fixed;
    right: 5px;
    bottom: 20%;   }

• En rouge, on retrouve bien les mêmes identifiants utilisé dans le code HTML.
• En vert, la position fixed permet à vos images de rester fixe sur votre blog. Elles ne bougeront pas en cas de scroll, et donc seront toujours visibles.
• En rose : la position des flèches sur votre blog, right par rapport au bort droit et bottom du bas. Vous pouvez mettre les valeurs en % ou en px.

Une fois les deux parties installées, vos flèches Monter/Descendre sont fonctionnelles. Vous pouvez également les personnaliser, comme les rendre plus discrètes par exemple en jouant sur l'opacité.

#id1{position: fixed;
    right: 5px;
    bottom: 20px;
    opacity: 0.3;}
   
#id2{position: fixed;
    right: 5px;
    bottom: 70px;
    opacity: 0.3;}

#id1:hover {opacity: 1;}

#id2:hover {opacity:1;}

Les flèches auront une opacité de 0.3 (légèrement transparente) et au survol (:hover), une opacité de 1, soit totalement visible.

Où trouver des flèches ?

Iconsdb ou Icones8

Voilà le tuto est terminé, j’espère qu'il vous sera utile !