Scrolldown icon is clickable

appKom · Sep 17, 2024 · 88aea9d · 88aea9d
1 parent 5ff1c80
commit 88aea9d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/components/home/ScrollDownIcon.tsx b/src/components/home/ScrollDownIcon.tsx
@@ -20,14 +20,20 @@ const ScrollDownIcon = () => {
     };
   }, []); // Tom dependency array betyr at effekten kjøres ved mount og cleanup ved unmount
 
+  const handleClick = (targetId: string) => {
+    const targetElement = document.getElementById(targetId);
+    targetElement?.scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
     <div
       className={clsx(
-        'flex justify-center items-center h-[10px] sticky bottom-10',
+        'flex justify-center items-center h-[10px] sticky bottom-10 cursor-pointer w-16 m-auto p-5 group',
         !isVisible && 'hidden',
       )}
+      onClick={() => handleClick('home-text')}
     >
-      <span className="border-solid border-white border-r-[5px] border-b-[5px] p-[6px] animate-bounceArrow"></span>
+      <span className="border-solid border-white group-hover:border-gray-500 transition border-r-[5px] border-b-[5px] p-[6px] animate-bounceArrow"></span>
     </div>
   );
 };

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -12,7 +12,7 @@ const HomePage = () => (
       <ScrollDownIcon />
     </div>
     <h1 className="my-4 mt-10 text-2xl md:hidden">Online Fondet</h1>
-    <div className="w-3/4 mb-10 text-lg text-justify">{homeText}</div>
+    <div id="home-text" className="w-3/4 py-20 text-lg text-justify">{homeText}</div>
     <PerformanceDisplay />
     <div className="hidden w-full mb-10 md:block">
       <div className="w-full mt-40 mb-10 text-lg text-center">