conditionally show back to top button

Author: amos-babu

src/App.tsx

@@ -4,18 +4,45 @@ import { GetInTouch } from "./components/GetInTouch";
 import { Technologies } from "./components/Technologies";
 import Projects from "./components/Projects";
 import Footer from "./components/Footer";
+import backTop from "../src/assets/back-top.svg";
+import { useEffect, useRef, useState } from "react";
 
 export default function App() {
+  const topRef = useRef<HTMLDivElement>(null);
+  const [showButton, setShowButton] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowButton(window.scrollY > 300);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    topRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
   return (
     <>
+      <div ref={topRef} />
       <div className="flex flex-col mx-auto justify-items-end">
-        <GetInTouch/>
+        <GetInTouch />
         <Introduction />
         <AboutMe />
         <Technologies />
         <Projects />
       </div>
       <Footer />
+
+      {showButton && (
+        <button
+          onClick={scrollToTop}
+          className="fixed z-50 px-4 py-4 transform -translate-x-1/2 bg-gray-200 rounded-full shadow-lg bottom-4 left-1/2"
+        >
+          <img src={backTop} alt="Back to Top" className="w-6 h-6" />
+        </button>
+      )}
     </>
   );
 }

src/assets/back-top.svg

@@ -19,42 +19,26 @@ export const Technologies = () => {
   return (
     <div className="flex flex-col mx-5">
       <div>
-        <motion.p
-          whileInView={{ opacity: 1, y: 0 }}
-          initial={{ opacity: 0, y: -100 }}
-          transition={{ duration: 1.5 }}
-          className="mt-20 mb-5 font-mono text-xl text-center"
-        >
+        <p className="mt-20 mb-5 font-mono text-xl text-center">
           <span className="text-2xl font-bold">Languages</span>
-        </motion.p>
+        </p>
       </div>
       <div className="flex flex-wrap justify-center gap-20">
         {languages.map((language) => (
-          <motion.div
-            whileInView={{ opacity: 1, x: 0 }}
-            initial={{ opacity: 0, x: language.xLanguage }}
-            transition={{ duration: 1.5 }}
-            className="max-w-3xl text-center"
-            key={language.id}
-          >
+          <div className="max-w-3xl text-center" key={language.id}>
             {" "}
             <img
               src={language.path}
               alt={language.name}
               className="w-20 h-20"
             />
-          </motion.div>
+          </div>
         ))}
       </div>
       <div>
-        <motion.p
-          whileInView={{ opacity: 1, x: 0 }}
-          initial={{ opacity: 0, x: 100 }}
-          transition={{ duration: 1.5 }}
-          className="mt-20 mb-5 font-mono text-xl text-center"
-        >
+        <p className="mt-20 mb-5 font-mono text-xl text-center">
           <span className="text-2xl font-bold">Frameworks and Tools</span>
-        </motion.p>
+        </p>
       </div>
       <div className="flex flex-wrap justify-center gap-20">
         {tools.map((tool) => (