Merge pull request #295 from Asymtode712/FloatBtnFeat

Added floating button to scroll back to top

src/components/FloatBtn/FloatBtn.css

@@ -0,0 +1,23 @@
+
+.scrollButton {
+    position: fixed;
+    bottom: 40px;
+    right: 20px;
+    background-color: #66BB6A;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    font-size: 24px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease;
+  }
+
+  .scrollButton:hover {
+    background-color: #43A047;
+  }

src/components/FloatBtn/FloatBtn.jsx

@@ -0,0 +1,17 @@
+import "./FloatBtn.css";
+
+const FloatBtn = () => {
+    const scrollToTop = () => {
+        window.scrollTo({
+          top: 0,
+          behavior: "smooth"
+        });
+      };
+      return(
+        <button class="scrollButton" onClick={scrollToTop}>
+        &#9650;
+      </button>
+      );
+};
+
+export default FloatBtn;

src/pages/About.jsx

@@ -4,7 +4,8 @@ import Navbar from "../components/Navbar";
 import AOS from "aos";
 import Loader from "../components/Loader/Loader";
 import "aos/dist/aos.css";
-import Footer from "../components/Footer"
+import Footer from "../components/Footer";
+import FloatBtn from "../components/FloatBtn/FloatBtn";
 
 const About = () => {
   const [loading,setLoading] = useState(false);
@@ -198,6 +199,7 @@ const About = () => {
           </div>
         </div>
         <Footer />
+        <FloatBtn />
       </div>
       )
     }

src/pages/Home.jsx

@@ -8,6 +8,7 @@ import Navbar from "../components/Navbar";
 import CanteenList from "../components/CanteenList";
 import Loader from "../components/Loader/Loader";
 import Footer from "../components/Footer";
+import FloatBtn from "../components/FloatBtn/FloatBtn";
 
 function Home() {
 
@@ -56,7 +57,9 @@ function Home() {
           <CanteenList canteenData = {canteenData}/>
         </div>
         <Footer />
+        <FloatBtn />
       </div>
+
       )
     }
     </>

src/pages/News.jsx

@@ -3,6 +3,7 @@ import Navbar from "../components/Navbar";
 import NewsCard from "../components/NewsCard";
 import Loader from "../components/Loader/Loader";
 import Footer from "../components/Footer";
+import FloatBtn from "../components/FloatBtn/FloatBtn";
 
 function News() {
   const [articles, setArticles] = useState([]);
@@ -50,6 +51,7 @@ function News() {
                 </div>
               </main>
               <Footer />
+              <FloatBtn />
             </div>
           )
       }