Ce que nous allons réaliser
Vous avez surement déjà remarqué, en consultant les pages de ce site, la présence de ce bouton (si si, en bas à gauche) sur la majorité des articles présentés.
En cliquant dessus, ce petit bout de code CSS et HTML permet un retour instantané au sommet de la page concernée.
Comment le mettre en place
Ce retour au sommet de page se compose de 3 éléments :
- Le bouton : celui-ci peut etre de type image (comme ici), texte ou un style CSS. Le choix vous appartient !
- Son insertion en HTML dans le <body> de votre page
- Une "ancre" qui déterminera le point de retour "haut de page"
Sa règle CSS
Celle ci reste relativement simple puisqu'il s'agit de mettre en place une règle de style très classique s'appliquant à une balise <div>, la différence réside uniquement dans le type de positionnement que nous lui attribuerons
#btntop
{
background-image:url(chemin de votre image);
width:128px; /*largeur de votre image, 128px pour l'exemple*/
height:128px; /*hauteur de votre image, 128px pour l'exemple*/
position: fixed; /*fixed permet un positionnement par rapport à la fenetre du navigateur*/
left:30px; /*décalage gauche de 30px*/
bottom:35px; /*décalage par rapport au bas de page de 35px*/
/*opacity:0.3;*/ /*eventuellement pour apporter une touche de discretion, dépend de votre image*/
}
/*La règle :hover est facultative, tout dépend du résultat attendu. l'exemple l'utilise. Je vous l'inclus au cas où vous en auriez besoin */
#btntop:hover
{
background-image:url(chemin de votre image);
width:128px;
height:128px;
position: fixed;
left:30px;
bottom:35px;
/*opacity:0.8;*/ /*eventuellement pour apporter un renforcement visuel au survol, dépend de votre image*/
}
Insertion dans le corps de page
La règle de style définie, nous allons l'attribuer à une balise <div> placée en début de code HTML
...
</head>
<body>
<div id="btntop"></div>
...
</body>
Mise en place de l'ancre
Comme cité plus haut, ce bouton sera rattaché à une "ancre" symbolisant le haut de page de votre site.
Pour l'exemple, ce point se situe juste au dessus du header, ramenant ainsi l'utilisateur tout en haut de la page.
Il vous appartient de déterminer ce point et d'y placer ce code d'ancre:
...
</head>
<body>
<div id="btntop"></div>
<a name="hautpage" id="hautpage"></a> <!-- ancre de haut de page -->
<div id = "header">
...
Puis rattachez votre bouton à cette ancre en lui ajoutant le lien correspondant.
Un lien vers une ancre se détermine en 2 points : l'id de cette ancre précédé du symbole #.
...
</head>
<body>
<a href="#hautpage"><div id="btntop"></div></a> <!-- lien vers le haut de page -->
<!-- les liens vers les ancres sont toujours précédés
du symbole # -->
<a name="hautpage" id="hautpage"></a>
<div id = "header">
...
Conclusion
Vous venez d'installer un bouton discret permettant à l'utilisateur de votre site de pouvoir revenir rapidement au sommet de la page consultée tout en ménageant la roulette de sa souris.