| import React, { useState, useEffect } from 'react'; | |
| import { FaArrowUp } from 'react-icons/fa'; | |
| const ScrollToTop = () => { | |
| const [isVisible, setIsVisible] = useState(false); | |
| useEffect(() => { | |
| const toggleVisibility = () => { | |
| if (window.pageYOffset > 300) { | |
| setIsVisible(true); | |
| } else { | |
| setIsVisible(false); | |
| } | |
| }; | |
| window.addEventListener('scroll', toggleVisibility); | |
| return () => window.removeEventListener('scroll', toggleVisibility); | |
| }, []); | |
| const scrollToTop = () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth', | |
| }); | |
| }; | |
| return ( | |
| <> | |
| {isVisible && ( | |
| <button | |
| onClick={scrollToTop} | |
| className="fixed bottom-8 right-8 bg-gradient-to-br from-primary-500 to-emerald-600 dark:from-primary-600 dark:to-emerald-700 text-white p-4 rounded-full shadow-2xl hover:shadow-primary-500/50 hover:scale-110 transition-all duration-300 z-50 group border-2 border-white/20" | |
| aria-label="Scroll to top" | |
| > | |
| <FaArrowUp className="text-xl group-hover:animate-bounce" /> | |
| </button> | |
| )} | |
| </> | |
| ); | |
| }; | |
| export default ScrollToTop; | |