Finetuning scroll to top button

js/components/ScrollToTopButton.js

@@ -8,7 +8,7 @@ export function ScrollToTopButton() {
 
     useEffect(() => {
         const handleScroll = () => {
-            if (window.scrollY > 2 * window.innerHeight) {
+            if (window.scrollY > 1.5 * window.innerHeight) {
                 setIsVisible(true);
             } else {
                 setIsVisible(false);
@@ -23,8 +23,6 @@ export function ScrollToTopButton() {
     };
 
     return (
-        <>
-            {isVisible && (
         <Button
             onClick={scrollToTop}
             style={{
@@ -34,12 +32,13 @@ export function ScrollToTopButton() {
                 borderRadius: '50%',
                 width: '50px',
                 height: '50px',
-                        zIndex: 999
+                zIndex: 999,
+                transition: 'opacity 0.5s ease-in-out',
+                opacity: isVisible ? 0.7 : 0,
+                pointerEvents: isVisible ? 'auto' : 'none'
             }}
         >
             <FontAwesomeIcon icon={faArrowUp} />
         </Button>
-            )}
-        </>
     );
 }