Add Scroll to top

src/App.jsx

@@ -21,7 +21,8 @@ import ContributorDetail from "./pages/contributor/ContributorDetail";
 import Login from "./pages/auth/Login";
 import SignUp from "./pages/auth/SignUp";
 import ChanakyaGpt from "./pages/resources/ChanakyaGpt";
-
+import ScrollToTop from "./components/shared/ScrollToTop";
+import ScrollProgressBar from "./components/shared/ScrollProgressBar";
 function App() {
   const { progress, isDarkMode } = useContext(Context); // Assuming isDarkMode is provided in your context
 
@@ -32,7 +33,10 @@ function App() {
   return (
     <div className={`d-flex flex-column ${isDarkMode ? 'dark' : ''}`}>
       <Router>
-        <Navbar />
+        <div>
+          <Navbar />
+          <ScrollProgressBar/>
+        </div>
         <LoadingBar height={3} color="#f11946" progress={progress} />
 
         <main className="container flex-grow-1 mt-4">
@@ -57,6 +61,7 @@ function App() {
         </main>
 
         <Footer />
+        <ScrollToTop/>
       </Router>
     </div>
   );

src/components/shared/Footer.jsx

@@ -8,7 +8,7 @@ import "../../css/Footer.css";
 
 const Footer = () => {
   const { isDarkMode } = useContext(Context);
-
+  const year = new Date().getFullYear();
   return (
     <footer className="footer font-small pt-4" style={{ backgroundColor: `${isDarkMode ? 'rgba(0, 0, 0, 0.4)' : 'rgba(223, 223, 176, 0.4)'}` }}>
       <div className="container pt-2">
@@ -52,8 +52,13 @@ const Footer = () => {
         </div>
       </div>
 
+
+      <div className="text-center">
+        <p>&copy; {year} Chanakya Niti. All rights reserved.</p>
+
       <div className="text-center" style={{ color: isDarkMode ? 'white' : 'black' }}>
         <p>&copy; {new Date().getFullYear()} Chanakya Niti. All rights reserved.</p>
+
       </div>
     </footer>
   );

src/components/shared/ScrollProgressBar.jsx

@@ -0,0 +1,23 @@
+import React, { useEffect,useState } from 'react'
+const ScrollProgressBar = () => {
+  const [scrollWidth,setScrollWidth]=useState(0)
+  useEffect(()=>{
+    const fillScrollLine=()=>{
+      const windowHeight=window.innerHeight;
+      const fullHeight=document.body.clientHeight;
+      const scrolled=window.scrollY;
+      const percentScrolled=(scrolled/(fullHeight-windowHeight))*100;
+      setScrollWidth(percentScrolled);
+    }
+    window.addEventListener('scroll',fillScrollLine);
+    return ()=>window.removeEventListener('scroll',fillScrollLine);
+  },[]);
+  return (
+    <div className={`scroll-progress-bar ${scrollWidth>0 ?'visible':''}` 
+    } style={{width:`${scrollWidth}%`}}>
+
+    </div>
+  )
+}
+
+export default ScrollProgressBar

src/components/shared/ScrollToTop.jsx

@@ -0,0 +1,31 @@
+import React,{useState,useEffect} from 'react'
+import { FaArrowUp } from "react-icons/fa";
+const ScrollToTop = () => {
+  const [isVisible,setIsVisible]=useState(false)
+  useEffect(()=>{
+    const toggleVisibility=()=>{
+      if(window.pageYOffset>300){
+        setIsVisible(true)
+      }
+      else{
+        setIsVisible(false);
+      }
+    };
+    window.addEventListener('scroll',toggleVisibility);
+    return ()=>window.removeEventListener('scroll',toggleVisibility);
+  },[]);
+  const ScrollToTop=()=>{
+    window.scrollTo({
+      top:0,
+      behavior:'smooth'
+    })
+  }
+  return (
+    <button onClick={ScrollToTop} 
+    className={`scroll-to-top ${isVisible?'show':""}`}>
+      <FaArrowUp size={30} className='m-2'/>
+    </button>
+  )
+}
+
+export default ScrollToTop

src/index.css

@@ -12,4 +12,48 @@ body {
   background-color: #2c2a2a;
   color: white;
   transition: 0.25s;
+}
+.scroll-to-top{
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
+  border-radius:50%;
+  background-color: #333;
+  color: #fff;
+  border: none;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.4s;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 1000;
+}
+.scroll-to-top.show{
+  opacity: 1;
+  visibility: visible;
+}
+.scroll-to-top:hover{
+  background-color: #555;
+}
+.navbar{
+  position:relative;
+  z-index: 1;
+}
+.scroll-progress-bar{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 8px;
+  background-color: #d1a3a4;
+  z-index: 2;
+  transition: opacity 0.3s;
+  opacity: 0;
+}
+.scroll-progress-bar.visible{
+  opacity: 1;
 }