Sticky to top button 2

by Simon Hi

HTML

<main>
  <h1>scroll to top</h1>
 <div class="intro">
    <p>
      Lorem Salu bissame ! Wie geht's les samis ? Hans apporte moi une
      Wurschtsalad avec un picon bitte, s'il te plaît. Voss ? Une Carola et du
      Melfor ? Yo dû, espèce de Knäckes, ch'ai dit un picon!
    </p>
    <p>
      Yoo ch ch'ai ramené du schpeck, du chambon, un kuglopf et du schnaps dans
      mon rucksack. Allez, s'guelt !
    </p>
    <p>
      Wotch a kofee avec ton bibalaekaess et ta wurscht ? Yeuh non che suis au
      réchime, je ne mange plus que des Grumbeere light et che fais de la chym
      avec Chulien. Tiens, un rottznoz sur le comptoir.
    </p>
    <p>Bande de knäckes!</p>
    <p>
      Lorem Salu bissame ! Wie geht's les samis ? Hans apporte moi une
      Wurschtsalad avec un picon bitte, s'il te plaît. Voss ? Une Carola et du
      Melfor ? Yo dû, espèce de Knäckes, ch'ai dit un picon!
    </p>
  </div>

  <div class="content">
    <p>
      Lorem Salu bissame ! Wie geht's les samis ? Hans apporte moi une
      Wurschtsalad avec un picon bitte, s'il te plaît. Voss ? Une Carola et du
      Melfor ? Yo dû, espèce de Knäckes, ch'ai dit un picon!
    </p>
    <p>
      Yoo ch ch'ai ramené du schpeck, du chambon, un kuglopf et du schnaps dans
      mon rucksack. Allez, s'guelt !
    </p>
    <p>
      Wotch a kofee avec ton bibalaekaess et ta wurscht ? Yeuh non che suis au
      réchime, je ne mange plus que des Grumbeere light et che fais de la chym
      avec Chulien. Tiens, un rottznoz sur le comptoir.
    </p>
    <p>Bande de knäckes!</p>
  </div>
</main>

<nav class="to-top-container">
  <a href="#" class="to-top" title="retourner en haut de page">
    <svg width="32" height="32" viewBox="0 0 24 24">
      <g fill="none" aria-hidden="true">
        <path
          d="M24 0v24H0V0zM12.6 23.3h-.2v.5h.2v-.5m.3-.2-.2.1v.5l.2.1v-.6m-.8 0v.6h.2v-.5z"
        />
        <path
          fill="currentColor"
          d="M13 3.3a1.5 1.5 0 0 0-2 0L5.2 8.9a1.5 1.5 0 0 0 2.1...

CSS

/* lien-bouton to-top encapsulé dans un container to-top-container */
.to-top-container {
  --to-top-range-start: 300px;
}
.to-top {
  --to-top-size: 4rem;
  --to-top-bottom: 20px;
  --to-top-right: 20px;
  --to-top-radius: 8px;
  --to-top-bg: #0007;
  --to-top-color: white;
}

body {
  /* nécessaire pour faire fonctionner la solution */
  position: relative;
}
.to-top-container {
  /* toutes les lignes ici sont importantes */
  position: absolute;
  left: 0;
  right: 0;
  /* la valeur de --horizon doit être supérieure ou égale à 100vh */
  /* on peut l'augmenter si on veut que le bouton n'apparaisse pas */
  /* dès qu'on scrolle */
  --horizon: calc(var(--to-top-range-start) + 100vh);
  top: var(--horizon);
  height: calc(100% - var(--horizon));
  pointer-events: none;
}

.to-top {
  /* toutes les lignes ici sont importantes */
  position: sticky;
  top: calc(100vh - var(--to-top-size) - var(--to-top-bottom));
  margin: 0 var(--to-top-right) 0 auto;
  pointer-events: auto;
  transform: scale(1, 0.1); /* initialialement, le bouton est une barre */
  color: #0000; /* intialialement, la flèche est invisible */
}

.to-top:hover {
  transform: scale(1, 1); /* le bouton devient carré */
  color:  var(--to-top-color); /* on fait apparaitre la flèche */
}

/***************************/
/* le reste est cosmétique */
/***************************/

/* style du lien */
.to-top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--to-top-size);
  height: var(--to-top-size);
  border-radius: var(--to-top-radius);
  background-color: var(--to-top-bg);
  pointer: cursor;
}

/* Reset / déco générale */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: bisque;
  font-size: 2rem;
  margin: 0;
  padding: 1rem;
}
h1 {
  text-align: center;
  color: chocolate;
}
main {
  max-width: 30ch;
  padding: 1ch 2ch 2ch;
  margin-inline: auto;
  background: white;
}
.content {
  margin-top: -2rem;
  padding: 1rem;
 ...