Retour en haut de page - Back to top
Dans les pages de contenu longues, il est possible de proposer un bouton de retour en haut de page à la fin du contenu.
Le retour en haut de page est constitué des éléments suivants :
- Icône flèche vers le haut - obligatoire
- Libellé “Haut de page” - obligatoire.
Le lien de retour en haut de page se place à la fin du contenu de la page, avant le pied de page. Aligné à gauche par défaut, avec le contenu, il peut aussi être centré ou aligné à droite.
Si il y a des bloc de poursuite de lecture (liens vers d’autres articles), il est conseillé de placer le retour en haut de page avant ces blocs.
Pour les développeur
Le lien
de “Haut de page” est une ancre vers un élément dont l’id est
"top".
Afin de le faire fonctionner correctement, il est nécessaire d’ajouter
l’attribut id
(id="top") sur l’élément le plus haut de la page comme le body
(<body id="top" ...>) ou les liens d’évitement (<div
class="fr-skiplinks" id="top">), afin que le focus de navigation
soit lui aussi replacé en haut de page.
Le lien haut de page est un lien classique fr-link composé de l'icone arrow-up-fill, alignée
à gauche, et du label "Haut de page".
<a class="fr-link fr-icon-arrow-up-fill fr-link--icon-left" href="#top">
Haut de page
</a>
Astuce : Pour aligner le lien à droite, l'insérer dans une <div class="fr-grid-row fr-grid-row--right">.