feat: add scroll to top button

1 files changed, 48 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;