src/components/ScrollTopArrow/ScrollTopArrow.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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;