feat: create a button top

assets/js/scrollToTop.js

@@ -0,0 +1,19 @@
+const button = document.querySelector(".button-up");
+
+const showButtonIfScroll = () => {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    button.style.display = "block";
+  } else {
+    button.style.display = "none";
+  }
+};
+
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+};
+
+button.addEventListener("click", scrollToTop);
+window.onscroll = () => showButtonIfScroll();

assets/sass/button_up.sass

@@ -0,0 +1,13 @@
+@import "variables"
+
+.button-up
+    background-color: $primary-500
+    color: $white
+    border: none
+    border-radius: 5px
+    padding: 10px 20px
+    cursor: pointer
+    position: fixed
+    top: 90%
+    right: 20px
+    display: none

index.html

@@ -16,6 +16,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link rel="stylesheet" href="assets/css/style.css" />
+  <link rel="stylesheet" href="assets/css/button_up.css" />
 
   <!-- Phosphor Icons -->
   <script src="https://unpkg.com/@phosphor-icons/web"></script>
@@ -83,9 +84,14 @@ <h2 class="header__subtitle">
         </div>
       </div>
     </div>
+    <button class="button-up">
+      Up
+      <i class="ph ph-arrow-up"></i>
+    </button>
   </main>
   <script src="assets/js/script.js" type="module"></script>
   <script src="assets/js/cookies.js" type="module"></script>
+  <script src="assets/js/scrollToTop.js" type="module"></script>
 </body>
 
-</html>
+</html>