Merge pull request #40 from ilyayudovin/scrollTop

add scroll to top button

2 files changed, 51 insertions, 0 deletions

diff --git a/src/components/ScrollTopArrow/ScrollTopArrow.tsx b/src/components/ScrollTopArrow/ScrollTopArrow.tsx
new file mode 100644
index 0000000..6b9d5c9
--- /dev/null
+++ b/src/components/ScrollTopArrow/ScrollTopArrow.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { FaArrowCircleUp } from 'react-icons/fa';
+import { makeStyles } from '@material-ui/core';
+import teal from '@material-ui/core/colors/teal';
+
+const useStyles = makeStyles(() => ({
+  scrollTop: {
+    position: 'fixed',
+    width: 50,
+    bottom: 50,
+    left: 50,
+    zIndex: 1000,
+    cursor: 'pointer',
+    opacity: 0.5,
+    '&:hover': {
+      opacity: '1'
+    }
+  }
+}));
+
+const ScrollTopArrow:React.FC = () => {
+  const [showScroll, setShowScroll] = useState(false);
+  const classes = useStyles();
+
+  const checkScrollTop = () => {
+    if (!showScroll && window.pageYOffset > 400) {
+      setShowScroll(true);
+    } else if (showScroll && window.pageYOffset <= 400) {
+      setShowScroll(false);
+    }
+  };
+
+  const scrollTop = () => {
+    window.scrollTo({ top: 0 });
+  };
+
+  window.addEventListener('scroll', checkScrollTop);
+
+  return (
+    <FaArrowCircleUp
+      className={classes.scrollTop}
+      onClick={scrollTop}
+      style={{ height: 50, display: showScroll ? 'block' : 'none', color: teal[700] }}
+    />
+  );
+};
+
+export default ScrollTopArrow;
diff --git a/src/index.tsx b/src/index.tsx
index a06ec62..1777e90 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,6 +15,7 @@ import FeedPage from './pages/FeedPage/FeedPage';
 import AuthPage from './pages/AuthPage/AuthPage';
 import { User, Page } from './types';
 import { get, post } from './requests';
+import ScrollTopArrow from './components/ScrollTopArrow/ScrollTopArrow';
 
 
 const theme = createMuiTheme({
@@ -93,7 +94,9 @@ const App: React.FC = () => {
         { page.prefix === 'feed' && <FeedPage navigate={navigate} /> }
         { page.prefix === 'auth' && <AuthPage logIn={logIn} /> }
       </div>
+      <ScrollTopArrow />
     </ThemeProvider>
+
   );
 };