Adicionado funcoes para o botao. COMENTADO OVERFLOW-X:HIDDEN no global.css

Author: Lmedeiros-leiman

src/components/BackToTop/BackToTop.tsx

@@ -2,32 +2,27 @@ import { useState } from "react"
 
 const BackToTop =() => {
 
-    const [isVisible, setVisibility] = useState(true)
+    const [isVisible, setVisibility] = useState(false)
 
     const scrollToTop = () => {
-        window.scrollTo(0,0)
+        window.scrollTo({top:0, behavior:"smooth"})
 
-        console.log("click!")
+        console.log(window.scrollY)
     }
 
-    const toggleVisibility = () => {
-        if (window.scrollY >= window.innerHeight) {
+    window.addEventListener("scroll", () => {
+        if ( window.innerHeight / 2 < window.scrollY) {
             setVisibility(true)
         } else {
             setVisibility(false)
         }
-
-        console.log("scrooled")
-    }
+    })
 
 
 return (isVisible && (
     <button 
-    className=" absolute bg-red-800/60 z-[100] right-10 bottom-10 w-12 h-12 rounded-full shadow-slate-500 font-bold shadow-md text-white select-none" 
-    onClick={scrollToTop} 
-    onScroll={toggleVisibility}
-    
-    
+    className=" fixed ease-in-out duration-300 hover:bg-red-800/100 bg-red-800/40 z-[100] right-10 bottom-10 w-12 h-12 rounded-full shadow-slate-500 font-bold shadow-md text-white select-none" 
+    onClick={scrollToTop}
     >^</button>
 ));
 }

src/global.css

@@ -88,6 +88,6 @@
 
   #root {
     max-width: 100vw;
-    overflow-x: hidden;
+    /*overflow-x: hidden;*/
   }
 }