Merge pull request #454 from RadhikaMalpani1702/master

Added Scroll-to-Top Button #444

package.json

@@ -59,4 +59,4 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.3"
   }
-}
+}

src/App.js

@@ -27,6 +27,7 @@ import Helmet from "react-helmet";
 import Freelancer from "./Components/FreeLancer/Freelancer";
 import router from "./configs/router";
 import ChatbotIcon from './Components/ChatbotIcon';
+import GoToTop from './Components/gototop';
 
 
 function App() {
@@ -49,6 +50,7 @@ function App() {
       <div>
         <RouterProvider router={router} />
       </div>
+      <GoToTop />
       <Footer />
       <ChatbotIcon />
     </div>

src/Components/Footer.css

@@ -7,6 +7,7 @@
 }
 .scrolltop{
   size: 20px;
+
 }
 .footer-container {
   display: flex;

src/Components/Footer.js

@@ -69,13 +69,7 @@ const Footer = () => {
           © 2024 UniCollab. All rights reserved.
         </div>
       </div>
-      <div className='scrolltop'>
-      <div style={{ textAlign: 'center', padding: '20px'  }}>
-        <button onClick={scrollToTop} className="button btn">
-          To the Top
-        </button>
-      </div>
-    </div>
+
     </div>
   );
 }

src/Components/gototop.js

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import { FaArrowUp } from "react-icons/fa";
+
+const GoToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      setIsVisible(currentScrollY > 200); // Change 200 to your desired scroll distance
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const goToTop = () => {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <Wrapper onClick={goToTop}>
+          <FaArrowUp className="top-btn--icon" />
+        </Wrapper>
+      )}
+    </>
+  );
+};
+
+const Wrapper = styled.div`
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 25px;
+  left: 40px;
+  color: white;
+  background-color: #ff21bc;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  cursor: pointer;
+  &:hover {
+    background-color: darkturquoise;
+
+  }
+`;
+
+export default GoToTop;

yarn.lock

@@ -11622,4 +11622,4 @@ yargs@^17.3.1, yargs@^17.7.2:
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
-  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==