fix: set the display time of the scroll top button

* Fixed scroll to top Signed-off-by: Apurv Sonawane <[email protected]> * Revert "Fixed scroll to top" This reverts commit 5b3dca5. * Fixed scroll to top Signed-off-by: Apurv Sonawane <[email protected]> * Formatted with prettier Signed-off-by: Apurv Sonawane <[email protected]> * added prop Signed-off-by: Apurv Sonawane <[email protected]> * chore: run yarn prettier --------- Signed-off-by: Apurv Sonawane <[email protected]> Co-authored-by: AndyHuang <[email protected]>
andyhuang18 · May 17, 2024 · 5817d8b · 5817d8b
1 parent 109e9be
commit 5817d8b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/src/components/scrollTopButton.js b/src/components/scrollTopButton.js
@@ -1,31 +1,46 @@
+import { useState, useEffect } from 'react';
 import { Button } from 'antd';
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
 function scrollToTop(timestamp) {
-  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   window.scrollTo({
     top: 0,
     left: 0,
     behavior: 'smooth',
   });
 }
 const ScrollTopButton = (props) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollY = window.scrollY;
+      setIsVisible(scrollY > 200);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
   return (
-    <Button
-      style={{
-        position: 'fixed',
-        zIndex: 2147483640,
-        right: '22px',
-        bottom: '60px',
-        backgroundColor: '#FFCC19',
-        borderColor: '#FFCC19',
-      }}
-      type="primary"
-      icon={<VerticalAlignTopOutlined />}
-      onClick={() => {
-        console.log('hi');
-        window.requestAnimationFrame(scrollToTop);
-      }}
-    />
+    <>
+      {isVisible && (
+        <Button
+          style={{
+            position: 'fixed',
+            zIndex: 2147483640,
+            right: '22px',
+            bottom: '60px',
+            backgroundColor: '#FFCC19',
+            borderColor: '#FFCC19',
+          }}
+          type="primary"
+          icon={<VerticalAlignTopOutlined />}
+          onClick={scrollToTop}
+        />
+      )}
+    </>
   );
 };
 export default ScrollTopButton;
diff --git a/src/index.js b/src/index.js
@@ -11,8 +11,7 @@ import { useTranslation } from 'react-i18next';
 import ScrollTopButton from './components/scrollTopButton';
 const { Content } = Layout;
 
-const META_URL =
-  'https://oss.x-lab.info/open_leaderboard/meta.json';
+const META_URL = 'https://oss.x-lab.info/open_leaderboard/meta.json';
 
 const App = () => {
   const NODE_ENV = process.env.NODE_ENV;