enhance go-to-top btn

package.json

@@ -9,6 +9,7 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "gh-pages": "^2.1.1",
     "jest-canvas-mock": "^2.3.1",
+    "lodash": "^4.17.21",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-easy-emoji": "^1.8.1",

src/containers/topbutton/Top.js

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect } from "react";
+import _ from "lodash";
 import "./Top.scss";
 
 export default function Top() {
@@ -12,18 +13,28 @@ export default function Top() {
       document.body.scrollTop > 20 ||
       document.documentElement.scrollTop > 20
     ) {
-      document.getElementById("topButton").style.visibility = "visible";
+      document.getElementById("topButton").style.opacity = 1;
     } else {
-      document.getElementById("topButton").style.visibility = "hidden";
+      document.getElementById("topButton").style.opacity = 0;
     }
   }
-  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
+
+  useEffect(() => {
+    window.onscroll = function () {
+      if (document.getElementById("topButton").style.opacity === "1") {
+        document.getElementById("topButton").style.opacity = 0;
+      }
+    };
+    window.addEventListener('scrollend', (event) => {
+      const debounced = _.debounce(scrollFunction, 500);
+      debounced();
+    });
+    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">
       <i className="fas fa-hand-point-up" aria-hidden="true"></i>

src/containers/topbutton/Top.scss

@@ -1,7 +1,8 @@
 @import "../../_globalColor";
 
 #topButton {
-  visibility: hidden;
+  transition: opacity .5s;
+  opacity: 0;
   position: fixed;
   bottom: 20px;
   right: 30px;