feat: scroll to top for #160

* decided it should be blue to stand out * shows up when you start to scroll down * visible on both mobile and desktop
tumavideo · Jan 18, 2024 · 0dc8905 · 0dc8905
1 parent 4c80b9e
commit 0dc8905
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 0 deletions.
diff --git a/app/opportunity/page.tsx b/app/opportunity/page.tsx
@@ -8,6 +8,7 @@ import { compareArrays, unique } from "@/utils";
 
 import assets from "@/assets";
 import Adsense from "@/components/Adsense";
+import ScrollToTopButton from "@/components/ScrollToTop";
 import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
 
@@ -90,6 +91,7 @@ export default async function Opportunities({ searchParams: { field, type } }) {
               <Opportunity key={index} opp={project} />
             ))}
           </ul>
+          <ScrollToTopButton />
           {!session ? (
             <div className="flex pt-10">
               <a

diff --git a/components/ScrollToTop.css b/components/ScrollToTop.css
@@ -0,0 +1,30 @@
+.scroll-to-top {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+  width: 40px;
+  height: 40px;
+  background-color: #007bff;
+  color: white;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 50%;
+  cursor: pointer;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.3s,
+    visibility 0.3s;
+}
+
+.scroll-to-top.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.scroll-to-top:hover {
+  background-color: #0056b3;
+}
diff --git a/components/ScrollToTop.js b/components/ScrollToTop.js
@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { FaArrowUp } from "react-icons/fa";
+import "./ScrollToTop.css";
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.pageYOffset > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  return (
+    <div
+      className={`scroll-to-top ${isVisible ? "active" : ""}`}
+      onClick={scrollToTop}
+    >
+      <FaArrowUp />
+    </div>
+  );
+};
+
+export default ScrollToTopButton;