Spaces:
Running
Running
| import React, { useState, useEffect } from 'react'; | |
| import { ChevronUp } from 'lucide-react'; | |
| const BackToTop = () => { | |
| const [visible, setVisible] = useState(false); | |
| useEffect(() => { | |
| const toggleVisibility = () => { | |
| if (window.pageYOffset > 300) { | |
| setVisible(true); | |
| } else { | |
| setVisible(false); | |
| } | |
| }; | |
| window.addEventListener('scroll', toggleVisibility); | |
| return () => window.removeEventListener('scroll', toggleVisibility); | |
| }, []); | |
| const scrollToTop = () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }; | |
| if (!visible) return null; | |
| return ( | |
| <button | |
| onClick={scrollToTop} | |
| style={{ | |
| position: 'fixed', | |
| bottom: '30px', | |
| right: '30px', | |
| width: '50px', | |
| height: '50px', | |
| borderRadius: '50%', | |
| background: 'var(--primary)', | |
| color: 'white', | |
| border: 'none', | |
| boxShadow: '0 4px 15px rgba(79, 70, 229, 0.4)', | |
| cursor: 'pointer', | |
| display: 'flex', | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| zIndex: 1000, | |
| transition: 'all 0.3s ease' | |
| }} | |
| onMouseEnter={(e) => e.target.style.transform = 'scale(1.1)'} | |
| onMouseLeave={(e) => e.target.style.transform = 'scale(1)'} | |
| > | |
| <ChevronUp size={24} /> | |
| </button> | |
| ); | |
| }; | |
| export default BackToTop; | |