back to top feature

css/style.css

@@ -1,9 +1,11 @@
 :root {
   --font-sans: "Inter", sans-serif;
   --font-mono: "Ubuntu Mono", monospace;
-  --code-color: #4d4e53;
-  --code-color-bg: #f5f5f5;
-  --js-logo-color: #ffd600;
+  --white-color: #fff;
+  --black-color: #000;
+  --dark-gray-color: #4d4e53;
+  --light-gray-color: #f5f5f5;
+  --js-yellow-color: #ffd600;
   --font-size: 1.2rem;
 }
 
@@ -63,7 +65,7 @@ nav {
   }
 
   a {
-    color: #000;
+    color: unset;
     position: relative;
     text-decoration: none;
   }
@@ -75,7 +77,7 @@ nav {
     left: 0;
     width: 0;
     height: 2px;
-    background-color: var(--js-logo-color);
+    background-color: var(--js-yellow-color);
     transition: width 0.3s ease-in-out;
   }
 
@@ -85,8 +87,39 @@ nav {
 }
 
 main {
+  position: relative;
   padding: 2rem;
   padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.scroll-to-top-container {
+  position: unset;
+  right: 5rem;
+}
+
+.scroll-to-top-btn {
+  display: block;
+  position: absolute;
+  right: 2rem;
+  bottom: 3rem;
+  padding: 0.8rem;
+  border: none;
+  color: var(--dark-gray-color);
+  background-color: var(--js-yellow-color);
+  box-shadow: 1px 1px 2px 2px solid rgba(0, 0, 0, 0.212);
+  transition: color 0.3s;
+}
+
+.scroll-to-top-btn::after {
+  font-size: 1.5rem;
+  font-family: "Material Symbols Rounded";
+  content: "keyboard_arrow_up";
+}
+
+.scroll-to-top-btn:hover {
+  cursor: pointer;
+  color: var(--black-color);
 }
 
 article {
@@ -110,8 +143,8 @@ code,
 pre {
   font-size: 1.1rem;
   font-family: var(--font-mono);
-  color: var(--code-color);
-  background-color: var(--code-color-bg);
+  color: var(--dark-gray-color);
+  background-color: var(--light-gray-color);
   overflow-x: scroll;
 }
 

index.html

@@ -74,6 +74,15 @@ <h1 id="doc-title">Docs</h1>
     </section>
     <section>
       <main>
+        <div class="scroll-to-top-container">
+          <button
+            type="button"
+            class="scroll-to-top-btn"
+            id="scroll-to-top-btn"
+            alt="Top"
+            title="Back to top"
+          ></button>
+        </div>
         <section id="introduction" class="section">
           <article>
             <h2>Introduction</h2>

script.js

@@ -1,20 +1,45 @@
-// JS icon gif on nav hover
-function isMobile() {
-  return (
-    /Android|iPhone/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0
-  );
-}
 const nav = document.querySelector("nav");
 const docTitle = document.querySelector("#doc-title");
-console.log(isMobile());
-if (!isMobile()) {
-  nav.onmouseenter = (e) => {
-    docTitle.classList.add("nav-hover");
-  };
+const scrollToTopBtn = document.querySelector("#scroll-to-top-btn");
+const scrollToTopContainer = document.querySelector(".scroll-to-top-container");
+
+const isPhoneOrTouch =
+  /Android|iPhone/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
 
+function animateLogo() {
+  nav.onmouseenter = (e) => docTitle.classList.add("nav-hover");
   nav.onmouseout = (e) => {
-    if (!nav.contains(e.relatedTarget)) {
+    const mouseOutNav = !nav.contains(e.relatedTarget);
+    if (mouseOutNav) {
       docTitle.classList.remove("nav-hover");
     }
   };
 }
+
+function fixBackToTopBtn() {
+  scrollToTopContainer.style.position = "absolute";
+  scrollToTopBtn.style.display = "none";
+  scrollToTopBtn.style.position = "fixed";
+  scrollToTopBtn.style.right = "unset";
+}
+
+scrollToTopBtn.addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+});
+
+window.addEventListener("scroll", () => {
+  if (window.scrollY > 800) {
+    scrollToTopBtn.style.display = "block";
+  } else {
+    scrollToTopBtn.style.display = "none";
+  }
+});
+
+if (isPhoneOrTouch) {
+  fixBackToTopBtn();
+} else {
+  animateLogo();
+}