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
49
50
51
52
53
54
55
56
57
|
import React, { useState } from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { useMediaQuery } from '@material-ui/core';
import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
const useStyles = makeStyles(theme => ({
root: {
position: 'fixed',
bottom: theme.spacing(10),
left: theme.spacing(10),
zIndex: 1000,
cursor: 'pointer',
opacity: 0.4,
'&:hover': {
opacity: 1
},
background: theme.palette.primary.main,
borderRadius: '50%'
},
icon: {
fontSize: 80,
color: 'white'
}
}));
const ScrollTopArrow: React.FC = () => {
const [showScroll, setShowScroll] = useState(false);
const theme = useTheme();
const classes = useStyles();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
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 (
<div className={classes.root}>
{
showScroll
&& !isMobile
&& <ArrowUpwardIcon className={classes.icon} color="primary" onClick={scrollTop} />
}
</div>
);
};
export default ScrollTopArrow;
|
