From 5c3a73f107c3fc6068885b00fae2d79ea6102727 Mon Sep 17 00:00:00 2001 From: Radhika Malpani Date: Sun, 7 Jul 2024 18:46:22 +0530 Subject: [PATCH 1/8] created button gototop.js --- src/Components/gototop.js | 57 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/Components/gototop.js diff --git a/src/Components/gototop.js b/src/Components/gototop.js new file mode 100644 index 00000000..a3371aac --- /dev/null +++ b/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 && ( + + + + )} + + ); +}; + +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; \ No newline at end of file From 474d5735477ba4af55be02b89e74dcd335d56ba2 Mon Sep 17 00:00:00 2001 From: Radhika Malpani Date: Sun, 7 Jul 2024 18:46:51 +0530 Subject: [PATCH 2/8] update footer.css --- src/Components/Footer.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Components/Footer.css b/src/Components/Footer.css index 49f8a9ba..fff12db6 100644 --- a/src/Components/Footer.css +++ b/src/Components/Footer.css @@ -7,6 +7,7 @@ } .scrolltop{ size: 20px; + } .footer-container { display: flex; From 671f95112ef772532ef4ac081ecc5eaf96158633 Mon Sep 17 00:00:00 2001 From: Radhika Malpani Date: Sun, 7 Jul 2024 18:47:09 +0530 Subject: [PATCH 3/8] update App.js --- src/App.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.js b/src/App.js index bbafa6c7..2414c760 100644 --- a/src/App.js +++ b/src/App.js @@ -27,6 +27,7 @@ import ResetPassword from './Components/auth/resetPassword/ResetPassword'; import Freelancer from './Components/FreeLancer/Freelancer'; import router from './configs/router'; import ChatbotIcon from './Components/ChatbotIcon'; +import GoToTop from './Components/gototop'; function App() { return ( @@ -35,6 +36,7 @@ function App() {
+