diff --git a/src/components/Backtotop.tsx b/src/components/Backtotop.tsx
new file mode 100644
index 00000000..f68c63c3
--- /dev/null
+++ b/src/components/Backtotop.tsx
@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { ArrowUp } from "lucide-react";
+
+const BackToTopButton: React.FC = () => {
+ const [isVisible, setIsVisible] = useState(false);
+
+ useEffect(() => {
+ const toggleVisibility = () => {
+ if (window.scrollY > 300) {
+ setIsVisible(true);
+ } else {
+ setIsVisible(false);
+ }
+ };
+
+ window.addEventListener("scroll", toggleVisibility);
+
+ return () => {
+ window.removeEventListener("scroll", toggleVisibility);
+ };
+ }, []);
+
+ const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+ };
+
+ return (
+ <>
+ {isVisible && (
+
+ )}
+ >
+ );
+};
+
+export default BackToTopButton;
\ No newline at end of file
diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index d4fee52c..d3b639b7 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -15,6 +15,7 @@ import { FaGithub } from "react-icons/fa";
import { Link } from "react-router-dom";
import axios from "axios";
import { GITHUB_REPO_CONTRIBUTORS_URL } from "../../utils/constants";
+import BackToTopButton from "../../components/Backtotop";
interface Contributor {
id: number;
@@ -136,6 +137,7 @@ const ContributorsPage = () => {
))}
+
);
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 03759ab4..86e1456f 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -1,6 +1,7 @@
import Hero from "../../components/Hero";
import HowItWorks from "../../components/HowItWorks";
import Features from "../../components/Features";
+import BackToTopButton from "../../components/Backtotop";
function Home() {
return (
@@ -8,7 +9,7 @@ function Home() {
-
+
)
}
diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx
index 576f39bf..1797f6c0 100644
--- a/src/pages/Tracker/Tracker.tsx
+++ b/src/pages/Tracker/Tracker.tsx
@@ -33,6 +33,7 @@ import { useTheme } from "@mui/material/styles";
import { useGitHubAuth } from "../../hooks/useGitHubAuth";
import { useGitHubData } from "../../hooks/useGitHubData";
import { KeyIcon } from "lucide-react";
+import BackToTopButton from "../../components/Backtotop";
const ROWS_PER_PAGE = 10;
@@ -396,6 +397,7 @@ const Home: React.FC = () => {
)}
+
);
};