-
-
Notifications
You must be signed in to change notification settings - Fork 103
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
100 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { useState, useEffect } from 'react'; | ||
|
|
||
| const BackToTopButton = () => { | ||
| const [isVisible, setIsVisible] = useState(false); | ||
| const [shouldRender, setShouldRender] = useState(false); // To control button rendering | ||
|
|
||
| // Show button when the user scrolls down 300px | ||
| const toggleVisibility = () => { | ||
| if (window.scrollY > 300) { | ||
| setShouldRender(true); // Start rendering the button | ||
| setIsVisible(true); // Make it visible (for fade-in) | ||
| } else { | ||
| setIsVisible(false); // Hide button (fade-out) | ||
| } | ||
| }; | ||
|
|
||
| // Scroll to the top of the page | ||
| const scrollToTop = () => { | ||
| window.scrollTo({ | ||
| top: 0, | ||
| behavior: 'smooth', // Smooth scroll to the top | ||
| }); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| window.addEventListener('scroll', toggleVisibility); | ||
|
|
||
| // Cleanup event listener on component unmount | ||
| return () => { | ||
| window.removeEventListener('scroll', toggleVisibility); | ||
| }; | ||
| }, []); | ||
|
|
||
| // Remove the button from the DOM after fade-out animation ends | ||
| useEffect(() => { | ||
| if (!isVisible) { | ||
| const timeout = setTimeout(() => setShouldRender(false), 500); // Match the animation duration | ||
| return () => clearTimeout(timeout); // Clean up the timeout | ||
| } | ||
| }, [isVisible]); | ||
|
|
||
| return ( | ||
| <> | ||
| {shouldRender && ( | ||
| <button | ||
| onClick={scrollToTop} | ||
| className={`z-50 fixed bottom-12 right-8 bg-green-700 hover:bg-green-600 text-white font-bold px-5 py-3 rounded-md shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 ${isVisible ? 'animate-fadeInBounce' : 'animate-fadeOutBounce' | ||
| }`} | ||
| style={{ boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }} | ||
| > | ||
| ↑ | ||
| </button> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default BackToTopButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters