最後までスクロールすると右下に「トップへ」ボタンが表示されます。

↓↓↓最後までスクロールしてください↓↓↓

<h1 id="top">最後までスクロールすると右下に「トップへ」ボタンが表示されます。</h1>
<a href="#top" class="gotoTop">トップへ</a>

html {
  scroll-behavior: smooth;
}

body {
  height: 200vh;
}

@keyframes progress {
  0% {
    bottom: -120px;
  }
  90% {
    bottom: -120px;
  }
  91% {
    bottom: 0;
  }
  98% {
    bottom: 20px;
  }
  100% {
    bottom: 20px;
  }
}

.gotoTop {
  display: grid;
  place-items: center;
  position: fixed;
  right: 20px;
  bottom: -120px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: navy;
  color: white;
  text-decoration: none;
  animation: progress linear;
  animation-timeline: scroll();
  transition: bottom 1s ease;
}

元記事を表示する