feat: added scroll-to-top

src/components/layout.js

@@ -2,15 +2,35 @@ import React, { useState, cloneElement, Fragment, useContext } from "react"
 import ToggleButton from "./toggleButton"
 import { Link } from "gatsby"
 import { ThemeContext } from "../context/ThemeContextProvider"
+import { FaArrowUp } from "react-icons/fa"
 
 const Layout = props => {
   const [isDarkMode, toggleThemeMode] = useContext(ThemeContext)
   // console.log(isDarkMode);
   const { navHeading, path, children } = props
   const [toggleNav, setToggleNav] = useState(false)
+  const [showBackToTop, setShowBackToTop] = useState(false)
+
   if (typeof window !== "undefined") {
     document.body.className = isDarkMode ? "dark" : "light"
+
+    // Add scroll listener
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > 400) {
+        setShowBackToTop(true)
+      } else {
+        setShowBackToTop(false)
+      }
+    })
   }
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    })
+  }
+
   var navActive = {
     home: "",
     about: "",
@@ -134,6 +154,11 @@ const Layout = props => {
           ))}
         </div>
       </main>
+      {showBackToTop && (
+        <span className="scroll-to-top-btn" onClick={scrollToTop}>
+          <FaArrowUp size={14} />
+        </span>
+      )}
       <footer className="site-foot">
         &copy; {new Date().getFullYear()} <Link to={`/`}>{navHeading}</Link>{" "}
         {/* &mdash; Built with{" "}

src/styles/css/components/global.css

@@ -493,3 +493,21 @@ h6 {
 .expandable-text:hover {
   text-decoration: underline;
 }
+
+.scroll-to-top-btn {
+  position: fixed;
+  color: var(--color-dark-base);
+  background-color: var(--color-primary);
+  padding: 5px 10px;
+  border-radius: 6px;
+  bottom: 20px;
+  right: 20px;
+  cursor: pointer;
+  z-index: 1000;
+  transition: background-color 0.2s ease;
+}
+
+.scroll-to-top-btn:hover {
+  background-color: color(var(--color-primary) l(-10%));
+  transition: background-color 0.2s ease;
+}