Scroll button react icons

src/components/home.jsx

@@ -1,21 +1,30 @@
-import React, { useEffect } from 'react';
-import ReactGA from 'react-ga';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import DevCard from './dev-card';
-import { profiles } from './dev-grid-utils';
+import React, { useEffect } from "react";
+import ReactGA from "react-ga";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import DevCard from "./dev-card";
+import { profiles } from "./dev-grid-utils";
+import "./styles.css";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+};
 
 const Home = () => {
   useEffect(() => {
     ReactGA.pageview(window.location.pathname + window.location.search);
   }, []);
   return (
     <>
-      <header style={{ textAlign: 'center' }}>
+      <header style={{ textAlign: "center" }}>
         <h1>Open Source Devs</h1>
         <h2> Software Developers Making a Difference</h2>
       </header>
-      <Box sx={{ flexGrow: 1, margin: '3em' }}>
+      <Box sx={{ flexGrow: 1, margin: "3em" }}>
         <Grid
           container
           spacing={{ xs: 2, md: 3 }}
@@ -27,7 +36,10 @@ const Home = () => {
             </Grid>
           ))}
         </Grid>
-      </Box>
+      </Box>{" "}
+      <button onClick={scrollToTop} id="scrollToTopBtn">
+        <ArrowUpwardIcon />
+      </button>
     </>
   );
 };

src/components/styles.css

@@ -0,0 +1,18 @@
+#scrollToTopBtn {
+  background-color: white;
+  border: none;
+  border-radius: 90px;
+  border: 3px solid black;
+  color: black;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 42px;
+  width: 48px;
+  align-items: center;
+  margin-left: 48%;
+}
+@media only screen and (max-width: 500px) {
+  #scrollToTopBtn {
+    margin-left: 40%;
+  }
+}