top button is visible only when not scrolling

src/containers/topbutton/Top.js

@@ -1,31 +1,43 @@
-import React from "react";
+import React, {useEffect, useRef} from "react";
 import "./Top.scss";
 
 export default function Top() {
+  const buttonRef = useRef(null);
+  const scrollTimeout = useRef(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (buttonRef.current) {
+        buttonRef.current.classList.remove("visible");
+      }
+
+      if (scrollTimeout.current) {
+        clearTimeout(scrollTimeout.current);
+      }
+
+      scrollTimeout.current = setTimeout(() => {
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+        if (scrollTop > 20 && buttonRef.current) {
+          buttonRef.current.classList.add("visible");
+        }
+      }, 1000); // 1 seconde sans scroll
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      clearTimeout(scrollTimeout.current);
+    };
+  }, []);
+
   function TopEvent() {
-    document.body.scrollTop = 0; // For Safari
-    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+    window.scrollTo({top: 0, behavior: "smooth"});
   }
-  // When the user scrolls down 20px from the top of the document, show the button
-  function scrollFunction() {
-    if (
-      document.body.scrollTop > 20 ||
-      document.documentElement.scrollTop > 20
-    ) {
-      document.getElementById("topButton").style.visibility = "visible";
-    } else {
-      document.getElementById("topButton").style.visibility = "hidden";
-    }
-  }
-  window.onscroll = function () {
-    scrollFunction();
-  };
-  window.onload = function () {
-    scrollFunction();
-  }; //To make sure that this button is not visible at starting.
-  // When the user clicks on the button, scroll to the top of the document
+
   return (
-    <button onClick={TopEvent} id="topButton" title="Go to top">
+    <button onClick={TopEvent} id="topButton" ref={buttonRef} title="Go to top">
       <i className="fas fa-hand-point-up" aria-hidden="true"></i>
     </button>
   );

src/containers/topbutton/Top.scss

@@ -1,7 +1,9 @@
 @import "../../_globalColor";
 
 #topButton {
-  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
   position: fixed;
   bottom: 20px;
   right: 30px;
@@ -16,6 +18,11 @@
   font-size: 25px;
 }
 
+#topButton.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 #topButton:hover {
   background-color: $topButtonHover;
   transition: all ease-in-out 0.2s;