Merge pull request Bitbox-Connect#366 from shriyadindi/scroll

Enhanced scroll back button with timeline on it for smoother functioning. (Issue Bitbox-Connect#352)
syedmohammadaquib · Nov 5, 2024 · ab40fdd · ab40fdd
2 parents 9c565d3 + e047c87
commit ab40fdd
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 37 deletions.
diff --git a/client/src/component/ScrollTop.jsx b/client/src/component/ScrollTop.jsx
@@ -3,6 +3,7 @@ import '../css/ScrollTop.css';
 
 const ScrollTop = () => {
     const [isVisible, setIsVisible] = useState(false);
+
     useEffect(() => {
         const handleScroll = () => {
             if (window.pageYOffset > 20) {
@@ -11,6 +12,7 @@ const ScrollTop = () => {
                 setIsVisible(false);
             }
         };
+
         window.addEventListener('scroll', handleScroll);
         return () => {
             window.removeEventListener('scroll', handleScroll);
@@ -24,15 +26,6 @@ const ScrollTop = () => {
         });
     };
 
-    // const smoothScrollToTop = () => {
-    //     const scrollY = window.pageYOffset;
-    //     const scrollStep = Math.max(500, Math.floor(scrollY / 100));
-    //     if (scrollY > 0) {
-    //         window.scrollBy(0, -scrollStep);
-    //         requestAnimationFrame(smoothScrollToTop);
-    //     }
-    // };
-
     return (
         <div className={`Scroll-Top ${isVisible ? 'visible' : ''}`}>
             <button onClick={smoothScrollToTop} title="Go to top" className="button">
@@ -41,9 +34,10 @@ const ScrollTop = () => {
                         d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
                     ></path>
                 </svg>
+                <div className="progress-circle"></div> {/* Added progress circle */}
             </button>
         </div>
     );
 };
 
-export default ScrollTop;
+export default ScrollTop;
diff --git a/client/src/css/ScrollTop.css b/client/src/css/ScrollTop.css
@@ -2,7 +2,7 @@
     display: none;
     position: fixed;
     bottom: 20px;
-    right: 80px;
+    right: 20px;
     z-index: 999;
     transition-duration: 0.3s;
 }
@@ -11,54 +11,58 @@
     display: block;
 }
 
-.Scroll-Top .button {
+.button {
     width: 50px;
     height: 50px;
     border-radius: 50%;
-    background-color: rgb(20, 20, 20);
+    background: linear-gradient(135deg, rgba(181, 160, 255, 1) 0%, rgba(20, 20, 20, 1) 100%);
     border: none;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     cursor: pointer;
-    transition-duration: 0.3s;
+    position: relative; /* Necessary for the progress circle positioning */
     overflow: hidden;
+    transition-duration: 0.3s;
 }
 
-.Scroll-Top .svgIcon {
+.svgIcon {
     width: 24px;
     transition-duration: 0.3s;
 }
 
-.Scroll-Top .svgIcon path {
+.svgIcon path {
     fill: white;
 }
 
-.Scroll-Top .button:hover {
-    width: 140px;
-    border-radius: 50px;
-    transition-duration: 0.3s;
-    background-color: rgb(181, 160, 255);
+.button:hover {
+    background: linear-gradient(135deg, rgba(255, 181, 160, 1) 0%, rgba(20, 20, 20, 1) 100%);
 }
 
-.Scroll-Top .button:hover .svgIcon {
-    transition-duration: 0.3s;
-    transform: translateY(-200%);
+/* Progress Circle */
+.progress-circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 30px;  /* Adjust size as needed */
+    height: 30px; /* Adjust size as needed */
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.7);
+    border-top-color: transparent; /* Make top part transparent for animation */
+    animation: spin 1s linear infinite; /* Spin animation */
+    transform: translate(-50%, -50%); /* Center it */
+    opacity: 0; /* Initially hidden */
+    transition: opacity 0.3s; /* Fade effect */
 }
 
-.Scroll-Top .button::before {
-    position: absolute;
-    bottom: -20px;
-    content: "Back to Top";
-    color: white;
-    font-size: 0px;
+.button:hover .progress-circle {
+    opacity: 1; /* Show on hover */
 }
 
-.Scroll-Top .button:hover::before {
-    font-size: 13px;
-    opacity: 1;
-    bottom: unset;
-    transition-duration: 0.3s;
-}
+/* Animation for the progress circle */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}