Use react-scroll for smooth transition to top

tin0312 · Nov 27, 2023 · 4fc06b5 · 4fc06b5
1 parent 6c57825
commit 4fc06b5
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 117 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.14.2",
-    "react-router-dom": "^6.14.2"
+    "react-router-dom": "^6.14.2",
+    "react-scroll": "^1.9.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/public/_redirects b/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/src/App.css b/src/App.css
@@ -189,6 +189,7 @@ body {
     font-size: 2em !important;
   }
   .contact-container {
+    background-color: #151515 !important;
     padding-top: 10%;
     padding-bottom: 15%;
   }
@@ -311,11 +312,10 @@ body {
   font-size: 1.2rem;
 }
 .project-stacks {
-  gap: 0.4em;
+  margin-left: 1em;
 }
 .project-stacks li{
   list-style: none;
-
 }
 /* back-to-top button */
 .back-to-top {
@@ -384,6 +384,7 @@ body {
   display: flex;
   justify-content: space-around;
   align-items: center;
+  background-color: #242424;
   margin: 10% auto 18%;
   width: 80vw;
 }

diff --git a/src/Pages/Projects.jsx b/src/Pages/Projects.jsx
@@ -1,6 +1,8 @@
 import React from "react";
 import * as Images from "../images";
 import { Container, Row, Col } from "react-bootstrap";
+import { Link } from 'react-scroll';
+
 export default function Projects() {
   const backToTop = document.querySelector(".back-to-top");
   const [isBackToTop, setIsBackToTop] = React.useState(false);
@@ -309,13 +311,9 @@ export default function Projects() {
           />
         </Col>
       </Row>
-      <a href="#top" className="back-to-top" title="Back to Top">
-        <img
-          src={Images.arrowUp}
-          alt="Back to Top"
-          className="back-to-top__image"
-        />
-      </a>
+      <Link to="top" smooth={true} duration={500} className={`back-to-top ${isBackToTop ? 'visible' : ''}`} offset={-70} title="Back-to-Top">
+        <img src={Images.arrowUp} alt="Back-to-Top" className="back-to-top__image" />
+      </Link>
     </Container>
   );
 }
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -11,7 +11,7 @@ export default function Header() {
   };
 
   return (
-    <Container fluid className = "header">
+    <Container fluid className = "header"  id="top">
       <Row className = "header-row w-100">
       <Col xs={6} lg={6} className="brand-name d-flex align-items-lg-center justify-content-center justify-content-lg-start" to="/">
             <div><Link to= "/">Justin</Link></div>

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -6,7 +6,7 @@ import Footer from "./Footer"
 export default function Layout() {
     return (
       <div className=" site-wrapper">
-        <Header />
+        <Header/>
         <main>
             <Outlet />
         </main>