Comment créer un bouton animé "Retour en haut" en utilisant uniquement du CSS

Article original : How to Make an Animated Back to Top Button Using Only CSS

Avoir un bouton "retour en haut" sur un site web est important. Il permet aux utilisateurs de faire défiler facilement la page vers le haut.

La plupart des sites web utilisent JavaScript pour basculer la visibilité du bouton en fonction du défilement. Dans cet article, je vais vous montrer comment créer un tel effet en utilisant uniquement du CSS.

Nous allons explorer deux types d'effets – un effet "glissant" et un effet "fondu".

Comment créer un bouton "Retour en haut" avec un effet glissant

Voici un aperçu de ce que nous allons construire dans cette partie :

Cliquez pour voir le code complet

html
  <body>
    <div>
      <!-- votre contenu va ici  -->
    </div>
    <a href="#" class="top">Retour en haut &#8593;</a>
  </body>

css
  body {
    display: grid;
    grid-template-columns: auto 0px; 
  }

  .top {
    --offset: 50px; 

    position: sticky;
    bottom: 20px;      
    margin-right: 10px; 
    place-self: end;
    margin-top: calc(100vh + var(--offset));

    /* style visuel */
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
    color: #fff;
    background: #000;
    border-radius: 100px;
    white-space: nowrap;
  }

  p {
    font-size: 25px;
  }

Si vous faites défiler la page, le bouton "retour en haut" apparaîtra et restera fixé en bas de la page. Cliquez dessus et vous retournerez en haut !

Vous ne trouverez aucun JavaScript ici. Nous n'utiliserons que du CSS pour faire apparaître le bouton lorsque vous faites défiler la page.

C'est cool, n'est-ce pas ? Décomposons le code pour comprendre la magie derrière tout cela.

La structure HTML

<body>
  <div>
    <!-- votre contenu va ici  -->
  </div>
  <a href="#" class="top">...</a>
</body>

À l'intérieur de la balise body, nous créons une div où nous mettons le contenu du site web. Juste après, nous ajoutons notre bouton "retour en haut" sous forme de lien.

Pour les besoins de l'article, je garderai le bouton aussi simple que possible, mais vous pouvez utiliser ce que vous voulez (une image, une icône, etc.). Tout ce dont vous avez besoin est de conserver l'utilisation de a combiné avec href="#".

C'est tout ! Nous avons terminé avec la structure HTML.

Le code CSS

Nous commençons d'abord par styliser notre bouton. Pour cette partie, c'est à vous d'être créatif et de construire votre propre bouton. J'utiliserai un bouton de base (<a class="top" href="#">Retour en haut 2191</a>) stylisé comme ceci :

.top {
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
}

Ce qui nous donnera le résultat suivant :

bouton retour en haut

Passons au CSS principal. L'effet que nous visons utilise deux techniques CSS :

CSS Grid pour créer la structure principale
position: sticky pour pouvoir garder le bouton en bas de l'écran

Notre structure sera une grille de deux colonnes – une pour le contenu et une autre pour le bouton "retour en haut". Pour cela, nous ajoutons le code suivant :

body {
  display: grid;
  grid-template-columns: auto auto;
}

Cela nous donne le résultat suivant :

Oui, cela semble "moche" mais ne vous inquiétez pas. Cela est dû à l'alignement par étirement par défaut de CSS Grid. Nous devons le désactiver et placer notre bouton en bas en utilisant place-self: end.

Maintenant, introduisons position: sticky en ajoutant ce code :

.top {
  position: sticky;
  bottom: 20px; 
}

Notre bouton est fixé en bas à droite de notre écran grâce à notre comportement "sticky". Maintenant, nous devons contrôler ce comportement pour que le bouton soit initialement masqué. Pour cela, nous utiliserons margin-top avec une valeur égale à la hauteur de l'écran (100vh).

Vous voyez cela ? Notre bouton apparaît uniquement lorsque nous faisons défiler l'écran et reste ensuite fixé. Nous nous rapprochons !

Améliorons cela en ajoutant un décalage. Notre margin-top deviendra :

.top {
  --offset: 100px; 

  margin-top: calc(100vh + var(--offset));
}

Cela signifie : "Après 100px de défilement, afficher le bouton". À la hauteur de l'écran, nous ajoutons un décalage (que nous définissons en utilisant une variable CSS) pour contrôler quand le bouton doit apparaître.

La touche finale consiste à rendre la largeur de la colonne du bouton égale à 0 en changeant grid-template-columns: auto auto en grid-template-columns: auto 0px.

Oups, le bouton est désordonné ! Puisque nous avons réduit l'espace du bouton à 0, ce dernier essaiera de s'adapter à cet espace en ajoutant des sauts de ligne. Pour corriger cela, nous ajoutons simplement white-space: nowrap pour désactiver les sauts de ligne.

Nous avons créé notre premier bouton "retour en haut" en CSS uniquement avec un effet glissant.

Vous pouvez ajuster le décalage pour contrôler quand le bouton doit apparaître
En utilisant bottom et margin-right, vous pouvez contrôler la distance par rapport au coin inférieur droit de l'écran.

N'oublions pas que vous pouvez facilement styliser le bouton comme vous le souhaitez. Voici une autre idée utilisant la même structure de code :

Cliquez pour voir le code complet

html
  <body>
    <div>
      <!-- votre contenu va ici  -->
    </div>
    <a href="#" class="top">Retour en haut &#8593;</a>
  </body>

css
  body {
    display: grid;
    grid-template-columns: auto 0px; 
  }

  .top {
    --offset: 50px; 

    position: sticky;
    bottom: 20px;      
    margin-right: 10px; 
    place-self: end;
    margin-top: calc(100vh + var(--offset));

    /* style visuel */
    width: 45px;
    aspect-ratio: 1;
    background: #ff8b24;
    border-radius: 10px;
  }

  .top:before {
    content: "";
    position: absolute;
    inset: 30%;
    transform: translateY(20%) rotate(-45deg);
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
  }

  p {
    font-size: 25px;
  }

Comment créer un bouton "Retour en haut" avec un effet fondu

Abordons le deuxième type de bouton où nous aurons un effet "fondu". Voici un aperçu de ce que nous allons créer ici :

Cliquez pour voir le code complet

html
  <body>
    <div>
      <!-- votre contenu va ici  -->
    </div>
    <div class="container-top">
      <a href="#" class="top"></a>
    </div>
  </body>

css
  body {
    display: grid;
    grid-template-columns: auto 0px; 
  }

  .container-top {
    --offset: 100px;
    --fade: 120px;

    display: flex;
    align-items: flex-end;
    width: 60px;
    justify-self: end;
    justify-content: flex-end;
    -webkit-mask: linear-gradient(#0000 calc(100vh + var(--offset)), #000 calc(100vh + var(--offset) + var(--fade)));
  }

  .top {
    position: sticky;
    bottom: 20px;      
    margin-right: 10px; 

    /* style visuel */
    width: 100%;
    aspect-ratio: 1;
    background: #ff8b24;
    border-radius: 10px;
  }

  .top:before {
    content: "";
    position: absolute;
    inset: 30%;
    transform: translateY(20%) rotate(-45deg);
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
  }

  p {
    font-size: 25px;
  }

Comme pour l'effet précédent, vous ne trouverez aucun code JavaScript. Cet effet de fondu est géré avec uniquement du CSS.

Analysons cela !

La structure HTML

<body>
  <div>
    <!-- votre contenu va ici  -->
  </div>
  <div class="container-top">
    <a href="#" class="top"></a>
  </div>
</body>

C'est très similaire à l'exemple précédent. Nous avons simplement ajouté un conteneur supplémentaire autour de notre bouton "retour en haut".

Le code CSS

Je vais sauter la partie où nous stylisons le bouton, car elle est la même que pour l'effet précédent.

Cet effet repose également sur CSS grid et position: sticky. Nous utiliserons également une troisième technique qui est la propriété mask (celle qui simulera l'effet de fondu).

Commençons par le paramétrage principal :

body {
  display: grid;
  grid-template-columns: auto auto; 
}

.container-top {
  display: flex;
  align-items: flex-end;
  width: 60px;
}

.top {
  position: sticky;
  bottom: 20px;      
  margin-right: 10px; 
}

Nous définissons notre mise en page à deux colonnes où container-top est la deuxième. Nous faisons de cette dernière un conteneur flex et nous plaçons le bouton tout en bas en utilisant align-items: flex-end. Enfin, nous utilisons position: sticky pour avoir le bouton fixé en bas à droite de l'écran.

Maintenant, introduisons la propriété mask pour créer l'effet de fondu. Pour comprendre cette astuce, j'utiliserai d'abord un fond pour illustrer son fonctionnement.

Dans l'exemple ci-dessus, j'ai appliqué le gradient suivant à container-top :

.container-top {
  background: linear-gradient(green 100vh, red 0);
}

Si vous faites défiler, vous remarquerez que le bouton passera de la zone verte à la zone rouge. La zone verte est égale à la hauteur de l'écran.

Imaginez que la zone verte est la partie "invisible" de container-top et la zone rouge est la partie "visible". C'est ce que mask fera si nous considérons le même gradient.

Dans cette dernière démonstration, nous avons remplacé background par mask et nous avons utilisé une combinaison de couleurs transparente/opaque au lieu de vert/rouge. Le bouton n'apparaît maintenant que lors du défilement !

Pour obtenir l'effet de fondu, nous devons augmenter la distance entre les deux couleurs. Introduisons une variable CSS et mettons à jour le masque comme suit :

.container-top {
  --fade: 120px;
  mask: linear-gradient(#0000 100vh, #000 calc(100vh + var(--fade)));
}

La couleur transparente se termine à 100vh, et la couleur opaque commence à 100vh + 120px. Nous avons un fondu de 120px entre transparent et opaque, ce qui nous donne le résultat suivant :

Nous y sommes presque ! Notre bouton s'estompe comme prévu. Il nous manque simplement la variable de décalage pour contrôler quand l'effet de fondu doit se produire.

Pour cela, nous faisons la même chose que pour l'effet précédent en introduisant la variable offset :

La touche finale consiste à rendre la largeur de la colonne de container-top égale à 0 en utilisant grid-template-columns: auto 0px

.container-top {
  --offset: 100px;
  --fade: 120px;

  mask: linear-gradient(#0000 calc(100vh + var(--offset)), #000 calc(100vh + var(--offset) + var(--fade)));
}

Notre deuxième bouton "retour en haut" est terminé ! Comme le précédent, vous pouvez facilement contrôler le décalage, l'effet de fondu et la position en ajustant les variables CSS, la propriété bottom et la propriété margin-right.

Merci d'avoir lu !

Pour plus de conseils CSS, suivez-moi sur Twitter.