Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 10x 10x 10x 4x 7x 7x 4x 4x 4x 4x 4x 10x 10x 1x 1x 10x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x | import { useEffect, useState } from 'react';
import { FaArrowUp } from 'react-icons/fa';
import Button, { ButtonVariant } from '../button/Button';
import { useIsMobile } from '@/hooks/useIsMobile';
import './ScrollToTopButton.scss';
const ScrollToTopButton = () => {
const [isVisible, setIsVisible] = useState(false);
const isMobile = useIsMobile();
useEffect(() => {
const toggleVisibility = () => {
setIsVisible(window.scrollY > 300);
};
window.addEventListener('scroll', toggleVisibility, { passive: true });
toggleVisibility();
return () => {
window.removeEventListener('scroll', toggleVisibility);
};
}, []);
const handleScrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
if (!isVisible || isMobile) return null;
return (
<Button
data-testid="scroll-to-top-button"
className="scroll-to-top"
variant={ButtonVariant.ROUND}
handleClick={handleScrollToTop}
aria-label="Scroll to top"
>
<FaArrowUp aria-hidden="true" focusable="false" />
</Button>
);
};
export default ScrollToTopButton;
|