Go to top button added

src/components/HomePage.jsx

@@ -2,13 +2,15 @@ import React from 'react'
 import Navbar from './Navbar/Navbar'
 import Homebox from './Homebox/Homebox'
 import Contentbox from './Contentbox/Contentbox'
+import ToTopButton from './ToTop/ToTopButton'
 
 function HomePage(props) {
   return (
     <>
     <Navbar />
     <Homebox />
     <Contentbox />
+    <ToTopButton />
     </>
   )
 }

src/components/ToTop/ToTopButton.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import "./totop.css"
+import ArrowUp from "../../images/arrow-up.svg"
+import { useState } from 'react'
+
+const ToTopButton = () => {
+  const [visible, setVisible] = useState(false);
+
+  window.addEventListener("scroll", () => {
+    if (window.scrollY > 50) setVisible(true);
+    else setVisible(false);
+  })
+
+  try {
+    document.getElementById('toTopButton').addEventListener("click", () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      })
+    })
+  } catch (e) {
+    console.log("Whoops")
+  }
+
+  return (
+    <div id='toTopButton' className={visible ? "round-button" : "round-button-hidden"}>
+        <img src={ArrowUp} className='filter-white' />
+    </div>
+  )
+}
+
+export default ToTopButton

src/components/ToTop/totop.css

@@ -0,0 +1,37 @@
+.round-button-hidden {
+    background-color: dodgerblue;
+    font-size: 2rem;
+    border-radius: 50%;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    right: 2%;
+    bottom: 4%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    transform: scale(0);
+}
+
+.round-button {
+    background-color: dodgerblue;
+    font-size: 2rem;
+    border-radius: 50%;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    right: 2%;
+    bottom: 4%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.round-button:hover {
+    background-color: rgb(11, 129, 247);
+    transition: all 0.2s ease;
+}