From b58fc84bbb7460275843cd5b99e145be2797ee42 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Tue, 16 Jun 2020 22:17:21 +0300
Subject: feat: add scroll to top button

---
 src/components/ScrollTopArrow/ScrollTopArrow.tsx | 48 ++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/ScrollTopArrow/ScrollTopArrow.tsx

(limited to 'src/components/ScrollTopArrow')

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;
-- 
cgit v1.2.3