Scroll to Top Button addition

src/components/Container.js

@@ -1,9 +1,10 @@
-import { useState, useEffect } from 'react';
-import Header from './Header.js'
-import Search from './Search.js'
-import Results from './Results.js'
-import data from '../json/data.json'
-import './Container.css'
+import { useState, useEffect } from "react";
+import Header from "./Header.js";
+import Search from "./Search.js";
+import Results from "./Results.js";
+import ScrollToTopButton from "./ScrollToTopButton";
+import data from "../json/data.json";
+import "./Container.css";
 
 function Container() {
   const [emojiData, setEmojiData] = useState([]);
@@ -12,49 +13,48 @@ function Container() {
 
   useEffect(() => {
     setEmojiData(data);
-  }, [])
-  const onChange = val => {
+  }, []);
+  const onChange = (val) => {
     setSearchQuery(val.toLowerCase());
 
     let queryKeywords = val.toLowerCase().trim().split(" ");
 
-    let newEmojis = []
+    let newEmojis = [];
 
     let queryLength = queryKeywords.length;
 
     let queryLengthSum = 0;
 
-    console.log("\n\n\n NEW LINE \n\n\n")
-
+    console.log("\n\n\n NEW LINE \n\n\n");
 
     if (val.toLowerCase() !== "") {
       emojiData.forEach((item) => {
         let removeDuplicates = [...new Set(item.keywords.trim().split(" "))];
         queryLengthSum = 0;
         queryKeywords.forEach((query) => {
-          removeDuplicates.forEach(keyword => {
+          removeDuplicates.forEach((keyword) => {
             if (keyword.indexOf(query) >= 0) {
               queryLengthSum++;
             }
-          })
-        })
-  
+          });
+        });
+
         if (queryLength <= queryLengthSum) {
-          newEmojis.push(item)
+          newEmojis.push(item);
         }
-
-      })
+      });
     }
 
-    setNewEmojiData(newEmojis)
-  }
+    setNewEmojiData(newEmojis);
+  };
   return (
     <div className="container">
       <Header />
-      <Search onChange={onChange} />
-      <Results emojiFiltered={searchQuery === "" ? emojiData : newEmojiData} />
+      <Search onChange={onChange} />{" "}
+      <Results emojiFiltered={searchQuery === "" ? emojiData : newEmojiData} />{" "}
+      <ScrollToTopButton />
     </div>
-  )
+  );
 }
 
-export default Container
+export default Container;

src/components/ScrollToTopButton.css

@@ -0,0 +1,26 @@
+.scroll-to-top-wrapper {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+}
+
+.scroll-top-button {
+  padding: 1rem;
+  border-radius: 1rem;
+  background-color: white;
+  box-shadow: -5px -5px 15px #ffffff99, 5px 5px 15px #152b4711;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  cursor: pointer;
+  animation: fadeIn 0.5s;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/components/ScrollToTopButton.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import "./ScrollToTopButton.css";
+import { ReactComponent as UpIcon } from "../assets/up.svg";
+
+const ScrollToTopButton = () => {
+  const [showScrollToTop, setScrollToTop] = useState(false);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.pageYOffset > 500) {
+        setScrollToTop(true);
+      } else {
+        setScrollToTop(false);
+      }
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  return (
+    <div className="scroll-to-top-wrapper">
+      {showScrollToTop && (
+        <div onClick={scrollToTop}>
+          <div className="scroll-top-button">
+            <UpIcon />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTopButton;