From 3637f4f86ac6c76a7371d381ebca95c869cc0cd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9ven?= <stevenleonard741@gmail.com>
Date: Mon, 2 Jun 2025 16:31:44 +0200
Subject: [PATCH 1/2] =?UTF-8?q?le=20bouton=20top=20dispara=C3=AEt=20pendan?=
 =?UTF-8?q?t=20le=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/topbutton/Top.js   | 62 ++++++++++++++++++++-----------
 src/containers/topbutton/Top.scss |  9 ++++-
 2 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/containers/topbutton/Top.js b/src/containers/topbutton/Top.js
index 574f716e74..d089ebe615 100644
--- a/src/containers/topbutton/Top.js
+++ b/src/containers/topbutton/Top.js
@@ -1,31 +1,49 @@
-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>
   );
diff --git a/src/containers/topbutton/Top.scss b/src/containers/topbutton/Top.scss
index 7408e6cc81..cdddabec38 100644
--- a/src/containers/topbutton/Top.scss
+++ b/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;

From f1f0a541ffa85731858822be103c5a766732e7e6 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Mon, 2 Jun 2025 14:35:35 +0000
Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/containers/topbutton/Top.js | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/containers/topbutton/Top.js b/src/containers/topbutton/Top.js
index d089ebe615..f1ef388709 100644
--- a/src/containers/topbutton/Top.js
+++ b/src/containers/topbutton/Top.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, {useEffect, useRef} from "react";
 import "./Top.scss";
 
 export default function Top() {
@@ -16,8 +16,7 @@ export default function Top() {
       }
 
       scrollTimeout.current = setTimeout(() => {
-        const scrollTop =
-          window.scrollY || document.documentElement.scrollTop;
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
 
         if (scrollTop > 20 && buttonRef.current) {
           buttonRef.current.classList.add("visible");
@@ -34,16 +33,11 @@ export default function Top() {
   }, []);
 
   function TopEvent() {
-    window.scrollTo({ top: 0, behavior: "smooth" });
+    window.scrollTo({top: 0, behavior: "smooth"});
   }
 
   return (
-    <button
-      onClick={TopEvent}
-      id="topButton"
-      ref={buttonRef}
-      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>
   );