/
DevMaster
/
my_cv
Обзор
Документация
Войти
/
DevMaster
/
my_cv
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/hooks/useScrollToTop.jsx
54 строки
1 KB
hubol01
first commit
13 окт 2024, 23:52
13 окт 2024, 23:52
3153ceb
Код
Авторство
О чём код?
// NOTE: This scroll to top is the actual working scroll to to when user clicks on the circle arrow that appears when use scrolls down. // The other `ScrollToTop` component in components folder is for the default react scroll to top behavior on route visit. import { useState, useEffect } from 'react'; import { FiChevronUp } from 'react-icons/fi'; const useScrollToTop = () => { const [showScroll, setShowScroll] = useState(false); useEffect(() => { window.addEventListener('scroll', scrollToTop); return function cleanup() { window.removeEventListener('scroll', scrollToTop); }; }); const scrollToTop = () => { if (!showScroll && window.pageYOffset > 400) { setShowScroll(true); } else if (showScroll && window.pageYOffset <= 400) { setShowScroll(false); } }; const backToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth', }); }; window.addEventListener('scroll', scrollToTop); return ( <> <FiChevronUp className="scrollToTop" onClick={backToTop} style={{ color: '', height: 45, width: 45, borderRadius: 50, right: 50, bottom: 50, display: showScroll ? 'flex' : 'none', padding: 5, }} /> </> ); }; export default useScrollToTop;