feat(scroll): Add scroll to top button (#77)

package.json

@@ -33,6 +33,7 @@
   ],
   "dependencies": {
     "@material-ui/core": "^4.5.1",
+    "@material-ui/icons": "^4.9.1",
     "moment": "^2.22.2",
     "node-sass": "^4.14.1",
     "react": "^16.6.0",

src/components/App.jsx

@@ -9,6 +9,7 @@ import TogglesContainer from './toggles/TogglesContainer';
 import LoadingSpinner from './statuses/LoadingSpinner';
 import InitialGreeting from './statuses/InitialGreeting';
 import SearchResultsContainer from './search/SearchResultsContainer';
+import ScrollToTopButton from './scrollToTopButton/ScrollToTopButton';
 import './App.scss';
 
 class App extends React.Component {
@@ -242,6 +243,7 @@ class App extends React.Component {
             results={results}
           />
         )}
+        <ScrollToTopButton />
       </div>
     );
   }

src/components/scrollToTopButton/ScrollToTopButton.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import { Fab } from '@material-ui/core';
+import ArrowUpIcon from '@material-ui/icons/ArrowUpward';
+import './ScrollToTopButton.scss';
+
+const ScrollToTopButton = () => {
+  const [showScroll, setShowScroll] = useState(false);
+
+  const getShouldShowButton = () => {
+    window.pageYOffset > 500 ? setShowScroll(true) : setShowScroll(false);
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', getShouldShowButton);
+    return () => {
+      window.removeEventListener('scroll', getShouldShowButton);
+    };
+  }, []);
+
+  return (
+    <div className="scroll-to-top" onClick={scrollToTop}>
+      {showScroll && (
+        <div>
+          <Fab aria-label="scroll back to top" color="primary">
+            <ArrowUpIcon fontSize="large" />
+          </Fab>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTopButton;

src/components/scrollToTopButton/ScrollToTopButton.scss

@@ -0,0 +1,15 @@
+.scroll-to-top{
+  position: fixed; 
+  width: 56px;
+  height: 56px;
+  bottom: 4%;
+  right: 2%;
+  z-index: 1000;
+}
+
+@media only screen and (max-width: 1000px) {
+  .scroll-to-top{
+      bottom: 11%;
+      right: 7.5%;
+  }
+}