feat(directory): add a scroll to top button

directory/src/component/scss/totop_button.module.scss

@@ -0,0 +1,84 @@
+.totop-button {
+  position: fixed;
+  user-select: none;
+  z-index: 2;
+  cursor: pointer;
+  height: 2rem;
+  right: 2rem;
+  bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 3rem;
+  height: 3rem;
+  opacity: 0;
+  transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+
+  &.show {
+    opacity: 1;
+  }
+
+  .bar {
+    position: absolute;
+    width: 100%;
+    height: 0.3rem;
+    background-color: var(--text-color-full);
+    will-change: auto;
+  }
+
+  .bar:nth-child(1) {
+    transform: rotateZ(45deg) scaleX(0.5) translateX(45%);
+  }
+
+  .bar:nth-child(2) {
+    transform: rotateZ(-45deg) scaleX(0.5) translateX(-45%);
+  }
+
+  .bar:nth-child(3), .bar:nth-child(4) {
+    transform: translateY(450%) rotateZ(90deg) scaleX(0.5);
+  }
+
+  &.clicked {
+    .bar:nth-child(1) {
+      animation: transform-1 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
+    }
+
+    .bar:nth-child(2) {
+      animation: transform-2 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
+    }
+
+    .bar:nth-child(3) {
+      animation: transform-3 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
+    }
+
+    .bar:nth-child(4) {
+      animation: transform-4 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
+    }
+  }
+}
+
+@keyframes transform-1 {
+  50% {
+    transform: translateY(450%) rotateZ(-90deg) scaleX(0.5);
+  }
+}
+
+@keyframes transform-2 {
+  50% {
+    transform: translateY(450%) rotateZ(90deg) scaleX(0.5);
+  }
+}
+
+
+@keyframes transform-3 {
+  50% {
+    transform: rotateZ(225deg) scaleX(0.5) translateX(-45%);
+  }
+}
+
+@keyframes transform-4 {
+  50% {
+    transform: rotateZ(-45deg) scaleX(0.5) translateX(-45%);
+  }
+}