Merge pull request #364 from MastanSayyad/dev

Re-Designed and Enhanced "Back to Top" Button Aesthetics and Functionality

package.json

@@ -43,6 +43,7 @@
     "react-tsparticles": "^2.12.2",
     "react-use": "^17.5.0",
     "slick-carousel": "^1.8.1",
+    "styled-components": "^6.1.11",
     "three": "^0.163.0",
     "tsparticles": "^3.3.0",
     "typescript": "^5.4.5"

src/App.jsx

@@ -6,6 +6,7 @@ import DemoSection from './components/DemoSection';
 import ContactUs from './components/ContactUs';
 import Models from './components/Models';
 import Preloader from './components/Preloader';
+import GoToTop from './components/BottomToTop';
 
 const App = () => {
   const [loading, setLoading] = useState(true);
@@ -22,6 +23,7 @@ const App = () => {
         <>
       <Navbar />
       <Home />
+      <GoToTop />
       <hr/>
 
       <DemoSection />

src/components/BottomToTop.jsx

@@ -1,49 +1,58 @@
-import React from 'react'
-import "./BottomToTop.css"
-import {
-    useState,
-    useEffect
-} from 'react';
-import { animateScroll as scroll } from 'react-scroll';
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import { FaArrowUp } from "react-icons/fa";
 
-const BackToTop = () => {
-    const [isVisible, setIsVisible] = useState(false);
+const GoToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
 
+  useEffect(() => {
     const handleScroll = () => {
-        if (window.scrollY > 100) {
-            setIsVisible(true);
-        } else {
-            setIsVisible(false);
-        }
+      const currentScrollY = window.scrollY;
+      setIsVisible(currentScrollY > 200); // Change 200 to your desired scroll distance
     };
 
-    useEffect(() => {
-        window.addEventListener('scroll', handleScroll);
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
-
-    const backToTop = () => {
-        // window.scrollTo({
-        //     top: 0,
-        //     behavior: 'smooth',
-        // });
-        scroll.scrollToTop({
-            duration: 500,
-            smooth: "easeInOutQuad",
-        });
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
     };
+  }, []);
+
+  const goToTop = () => {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <Wrapper onClick={goToTop}>
+          <FaArrowUp className="top-btn--icon" />
+        </Wrapper>
+      )}
+    </>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 17px;
+  right: 10px;
+  color: white;
+  background-color: rgb(59 130 246);
+  width: 48px;
+  height: 48px;
+  z-index: 9999;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  
+  &:hover {
+    background-color: #003a79;
+    transform: translateY(-5px);
+  }
+`;
 
-    return (<
-        div className={
-            `scroll-to-top-button ${isVisible ? 'visible' : ''}`
-        }
-        onClick={
-            backToTop
-        } >
-        <i class="ri-arrow-up-s-line" > </i> </div>
-    )
-}
-
-export default BackToTop
+export default GoToTop;