Merge pull request #281 from Super3laa/AlaaEssam

Author: Roshanjossey

src/App.jsx

@@ -3,6 +3,7 @@ import './App.css';
 import LinkButton from './components/LinkButton/LinkButton';
 import Navbar from './components/Navbar/Navbar';
 import CardsContainer from './components/ProjectList/CardsContainer';
+import ScrollUpButton from './components/ScrollUpButton/ScrollUpButton';
 import SocialShare from './components/SocialShare/SocialShare';
 
 const App = () => {
@@ -12,6 +13,7 @@ const App = () => {
         <div className="App-header">
             <h1>Make your first open source contribution in 5 minutes</h1>
         </div>
+        <ScrollUpButton />
         <LinkButton />
         <CardsContainer />
         <SocialShare/>

src/components/ScrollUpButton/ScrollUpButton.css

@@ -0,0 +1,29 @@
+
+.Scroll-Up {
+    cursor: pointer;
+    position: relative;
+    animation: swing alternate 0.5s infinite;
+}
+
+.Scroll-Up:active {
+    opacity: 0.75;
+}
+
+.Scroll-Up-Wrapper {
+    padding: 1vw;
+    padding-bottom: 1.75vw;
+    z-index: 3;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+}
+
+@keyframes swing {
+    from {
+        top: -0.5rem;
+    }
+
+    to {
+        top: 1rem;
+    }
+}

src/components/ScrollUpButton/ScrollUpButton.jsx

@@ -0,0 +1,25 @@
+import React,{useEffect, useState} from 'react'
+import './ScrollUpButton.css'
+import scrollUp from "./scroll-up.svg";
+
+export default function ScrollUpButton() {
+    const [currentYPos,setCurrentYPos] = useState(window.pageYOffset);
+    const offsetHeight = window.innerHeight - 80
+    useEffect(()=>{
+        function updatePosition(){
+            setCurrentYPos(window.pageYOffset);
+        }
+        window.addEventListener('scroll', updatePosition);
+        updatePosition();
+        return () => window.removeEventListener('scroll', updatePosition);
+       },[])
+
+       const scrollUpFn = ()=> window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+    return (
+         currentYPos >= offsetHeight ? <div className="Scroll-Up-Wrapper">
+            <img className="Scroll-Up"
+                onClick={scrollUpFn}
+                src={scrollUp} alt="Scroll Up!" width="64" height="64" />
+        </div>:<></>
+    )
+}

src/components/ScrollUpButton/ScrollUpButton.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import ScrollUpButton from './ScrollUpButton';
+
+
+it('renders a project card', () => {
+  const tree = renderer.create(
+    <ScrollUpButton />
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+