Improve scroll-to-top button

src/app/components/site/ScrollToTop.tsx

@@ -1,28 +1,24 @@
-import React, {useEffect, useRef} from "react";
+import React, { useCallback, useEffect } from "react";
+import classNames from "classnames";
 
-export const ScrollToTop = ({mainContent}: {mainContent: React.RefObject<any>}) => {
-    const scrollButton = useRef(null);
+export const ScrollToTop = ({mainContent}: {mainContent: React.MutableRefObject<HTMLElement | null>}) => {
+    const [sticky, setSticky] = React.useState(false);
 
-    const isSticky = () => {
-        const scrollTop = window.scrollY;
-        // @ts-ignore
-        scrollTop >= mainContent.current.offsetTop + 1 ? scrollButton.current.classList.add('is-sticky') : scrollButton.current.classList.remove('is-sticky');
-    }
-
-    const scroll = () => {
-        mainContent.current.scrollIntoView({behavior: 'smooth'});
-    }
+    const isSticky = useCallback(() => {
+        setSticky(!!mainContent.current && window.scrollY >= mainContent.current.offsetHeight * 0.2);
+    }, [mainContent]);
 
     useEffect(() => {
         window.addEventListener('scroll', isSticky);
         return () => {
             window.removeEventListener('scroll', isSticky);
         };
-    });
+    }, [isSticky]);
 
-    return <div ref={scrollButton} onClick={scroll} className="scroll-btn d-print-none">
-        <button>
-            <img src="/assets/common/icons/chevron-up.svg" alt="Scroll to top of page"/>
-        </button>
-    </div>
-}
+    return <button 
+        onClick={() => mainContent.current?.scrollIntoView({behavior: 'smooth'})} 
+        className={classNames("scroll-btn d-print-none", {"is-sticky": sticky})}
+    >
+        <img src="/assets/common/icons/chevron-up.svg" alt="Scroll to top of page"/>
+    </button>;
+};

src/scss/common/scroll-button.scss

@@ -1,40 +1,26 @@
-$width: 50px;
-$height: 50px;
-$color: #ffffff;
-
 .scroll-btn {
-  visibility: hidden; // If not in use hide
-  height: 0;
-  display: grid;
-  box-shadow: 0 2px 24px 0 rgb(0 0 0 / 15%);
-  background-color: $color !important;
-  justify-content: center;
-  align-content: center;
-}
-
-.scroll-btn img {
-  height: 0.75 * $height;
-  width: 0.75 * $width;
-  align-self: center;
-}
-
-.scroll-btn button {
-  // Alpha channel 0 to make transparent
-  background: #00000000;
-}
-
-.is-sticky {
-  visibility: visible;
   position: fixed;
+  opacity: 0; // If not in use hide
+  height: 45px;
+  width: 45px;
+  display: flex;
+  background-color: #fff;
+  justify-content: center;
+  align-items: center;
   bottom: 10px;
   right: 10px;
-  z-index: 999;
-  box-shadow: 0 2px 24px 0 rgb(0 0 0 / 15%);
-  background-color: $color !important;
+  box-shadow: 2px 2px 10px 0 #0004;
+  background-color: #fff !important;
   border-radius: 50%;
-  height: $height;
-  width: $width;
-  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
-  padding-top: 0;
-  padding-bottom: 0;
+  transition: opacity 0.1s linear;
+  z-index: 999;
+  img {
+    margin-top: -4px;
+    height: 80%;
+    width: 80%;
+  }
+}
+
+.is-sticky {
+  opacity: 1;
 }