Merge pull request #31 from Devashish-Mishra-2003/main

Fixes: Adding Scroll to top button #29

package.json

@@ -14,7 +14,9 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0"
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.27.0",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

src/App.jsx

@@ -9,6 +9,7 @@ import { HomePage } from './pages/home/index.jsx';
 import { SpeakerPage } from './pages/speaker/index.jsx';
 import { AboutPage } from './pages/about/index.jsx';
 import { Footer } from './components/Footer/index.jsx';
+import ScrollToTopButton from "./components/ScrollToTopButton";
 
 function App() {
   // const [count, setCount] = useState(0)
@@ -22,6 +23,7 @@ function App() {
         <Route path="/speaker" element={<SpeakerPage />} />
         <Route path="/about" element={<AboutPage />} />
       </Routes>
+      <ScrollToTopButton/>
       <Footer />
     </>
   )

src/Styles/Button.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const Button = styled.div`
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding: 0.85rem 2.13rem;
+  font-size: 0.9375rem;
+  border-radius: 10em;
+  transition: all 0.15s ease-in-out;
+`;

src/components/ScrollToTopButton.jsx

@@ -0,0 +1,79 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styled from "styled-components";
+import { CgChevronDoubleUp } from "react-icons/cg";
+
+const ScrollToTopButton = () => {
+  const [visible, setVisible] = useState(false);
+
+  function scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }
+  const listenToScroll = useCallback(() => {
+    let heightToHidden = 250;
+    const winScroll =
+      document.body.scrollTop || document.documentElement.scrollTop;
+
+    if (winScroll > heightToHidden) {
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  }, [setVisible])
+
+  useEffect(() => {
+    window.addEventListener("scroll", listenToScroll);
+    return () => window.removeEventListener("scroll", listenToScroll);
+  }, [listenToScroll]);
+
+  return (
+    <>
+      {visible && (
+        <Wrapper>
+          <div className="top-btn" onClick={scrollToTop}>
+            <CgChevronDoubleUp className="up-icon" />
+          </div>
+        </Wrapper>
+      )}
+    </>
+  );
+};
+
+export default ScrollToTopButton;
+
+const Wrapper = styled.div`
+  .top-btn {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+    bottom: 2rem;
+    right: 2rem;
+    cursor: pointer;
+    padding: 0.25rem;
+    z-index: 999;
+    border-radius: 50%;
+    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
+    background-color: blue;
+
+    .up-icon {
+      font-size: 1.5rem;
+      transition: transform 0.5s;
+      &:hover {
+        transform: translateY(-2px);
+      }
+    }
+  }
+  @media (max-width: 700px) {
+    .top-btn{
+      width: 40px;
+      height: 40px;
+      bottom: 5rem;
+      right: 1rem;
+    }
+  }
+`;