Merge pull request #1182 from shriyadindi/scroll-back

feat: Enhanced scroll back button to all the pages with a progress ring.
vishanurag · Nov 7, 2024 · 8fb83cf · 8fb83cf
2 parents 71673cf + 0feedd6
commit 8fb83cf
Show file tree

Hide file tree

Showing 10 changed files with 1,054 additions and 114 deletions.
diff --git a/Blog_page.html b/Blog_page.html
@@ -266,31 +266,6 @@
             transform: translateY(-2px);
         }
 
-        #BacktoTop {
-            position: fixed;
-            bottom: 2rem;
-            right: 2rem;
-            background: #7c3aed;
-            color: white;
-            width: 3rem;
-            height: 3rem;
-            border-radius: 50%;
-            border: none;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-            transition: all 0.3s ease;
-            opacity: 0.8;
-        }
-
-        #BacktoTop:hover {
-            background: #6d28d9;
-            transform: translateY(-2px);
-            opacity: 1;
-        }
-
         @media (max-width: 768px) {
             .navbar {
                 flex-direction: column;
@@ -592,10 +567,6 @@ <h2>Exploring creative fields</h2>
 
 
      <!-- Back to Top Button -->
-     <button id="BacktoTop">
-      <span>↑</span>
-    </button>
-    <script src="src/Scripts/BacktoTop.js"></script>
     <script>
       // Coordinates for the cursor
       const coords = { x: 0, y: 0 };
@@ -696,5 +667,100 @@ <h2>Exploring creative fields</h2>
       });
 
     </script>
+    <button id="scrollToTopBtn">
+      <div class="progress-ring">
+          <svg viewBox="0 0 36 36">
+              <path class="ring-bg" d="M18 2a16 16 0 1 1 0 32 16 16 0 0 1 0-32"></path>
+              <path class="ring-progress" d="M18 2a16 16 0 1 1 0 32 16 16 0 0 1 0-32"></path>
+          </svg>
+      </div>
+      <span>&uarr;</span>
+  </button>
+  <style>
+/* Scroll to Top Button */
+#scrollToTopBtn {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          background: linear-gradient(135deg, #ffb7fd 0%, #abc0ef 100%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+          outline: none;
+          border: none;
+          opacity: 0;
+          transition: opacity 0.3s;
+      }
+
+      #scrollToTopBtn.show {
+          opacity: 1;
+      }
+
+      #scrollToTopBtn span {
+          font-size: 24px;
+          color: white;
+      }
+
+      /* Progress Ring */
+      .progress-ring {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 36px;
+          height: 36px;
+          transform: translate(-50%, -50%);
+      }
+
+      .progress-ring svg {
+          width: 100%;
+          height: 100%;
+          transform: rotate(-90deg);
+      }
+
+      .ring-bg {
+          fill: none;
+          stroke: rgba(255, 255, 255, 0.2);
+          stroke-width: 4;
+      }
+
+      .ring-progress {
+          fill: none;
+          stroke: white;
+          stroke-width: 4;
+          stroke-dasharray: 100;
+          stroke-dashoffset: 100;
+          transition: stroke-dashoffset 0.3s;
+      }
+  </style>
+
+  <!-- JavaScript for Scroll to Top Button -->
+  <script>
+      // Show button and update progress ring on scroll
+      const scrollToTopBtn = document.getElementById("scrollToTopBtn");
+      const ringProgress = document.querySelector(".ring-progress");
+
+      window.addEventListener("scroll", () => {
+          // Show/hide button
+          if (window.scrollY > 300) {
+              scrollToTopBtn.classList.add("show");
+          } else {
+              scrollToTopBtn.classList.remove("show");
+          }
+
+          // Update progress ring
+          const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
+          ringProgress.style.strokeDashoffset = 100 - scrollPercentage;
+      });
+
+      // Scroll to top when button clicked
+      scrollToTopBtn.addEventListener("click", () => {
+          window.scrollTo({ top: 0, behavior: "smooth" });
+      });
+  </script>
   </body>
 </html>
diff --git a/Faq.html b/Faq.html
@@ -647,5 +647,100 @@ <h2>Contact Us</h2>
 }
 
 </style>
+<button id="scrollToTopBtn">
+    <div class="progress-ring">
+        <svg viewBox="0 0 36 36">
+            <path class="ring-bg" d="M18 2a16 16 0 1 1 0 32 16 16 0 0 1 0-32"></path>
+            <path class="ring-progress" d="M18 2a16 16 0 1 1 0 32 16 16 0 0 1 0-32"></path>
+        </svg>
+    </div>
+    <span>&uarr;</span>
+</button>
+<style>
+/* Scroll to Top Button */
+#scrollToTopBtn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #ffb7fd 0%, #abc0ef 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+        outline: none;
+        border: none;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+
+    #scrollToTopBtn.show {
+        opacity: 1;
+    }
+
+    #scrollToTopBtn span {
+        font-size: 24px;
+        color: white;
+    }
+
+    /* Progress Ring */
+    .progress-ring {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 36px;
+        height: 36px;
+        transform: translate(-50%, -50%);
+    }
+
+    .progress-ring svg {
+        width: 100%;
+        height: 100%;
+        transform: rotate(-90deg);
+    }
+
+    .ring-bg {
+        fill: none;
+        stroke: rgba(255, 255, 255, 0.2);
+        stroke-width: 4;
+    }
+
+    .ring-progress {
+        fill: none;
+        stroke: white;
+        stroke-width: 4;
+        stroke-dasharray: 100;
+        stroke-dashoffset: 100;
+        transition: stroke-dashoffset 0.3s;
+    }
+</style>
+
+<!-- JavaScript for Scroll to Top Button -->
+<script>
+    // Show button and update progress ring on scroll
+    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
+    const ringProgress = document.querySelector(".ring-progress");
+
+    window.addEventListener("scroll", () => {
+        // Show/hide button
+        if (window.scrollY > 300) {
+            scrollToTopBtn.classList.add("show");
+        } else {
+            scrollToTopBtn.classList.remove("show");
+        }
+
+        // Update progress ring
+        const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
+        ringProgress.style.strokeDashoffset = 100 - scrollPercentage;
+    });
+
+    // Scroll to top when button clicked
+    scrollToTopBtn.addEventListener("click", () => {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    });
+</script>
 
 </html>
diff --git a/about-us.html b/about-us.html
@@ -180,9 +180,71 @@
                 width: 90%;
             }
         }
+
+        /* Scroll to Top Button */
+        #scrollToTopBtn {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #ffb7fd 0%, #abc0ef 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+            outline: none;
+            border: none;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        #scrollToTopBtn.show {
+            opacity: 1;
+        }
+
+        #scrollToTopBtn span {
+            font-size: 24px;
+            color: white;
+        }
+
+        /* Progress Ring */
+        .progress-ring {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 36px;
+            height: 36px;
+            transform: translate(-50%, -50%);
+        }
+
+        .progress-ring svg {
+            width: 100%;
+            height: 100%;
+            transform: rotate(-90deg);
+        }
+
+        .ring-bg {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.2);
+            stroke-width: 4;
+        }
+
+        .ring-progress {
+            fill: none;
+            stroke: white;
+            stroke-width: 4;
+            stroke-dasharray: 100;
+            stroke-dashoffset: 100;
+            transition: stroke-dashoffset 0.3s;
+        }
     </style>
 </head>
 <body>
+    <!-- Circles -->
+    <div class="circle"></div>
     <!-- Navbar -->
     <header>
         <nav class="navbar">
@@ -240,20 +302,45 @@ <h4>Somyadip Ghosh</h4>
         </div>
     </div>
 
+    <!-- Scroll to Top Button -->
+    <button id="scrollToTopBtn">
+        <div class="progress-ring">
+            <svg viewBox="0 0 36 36">
+                <path class="ring-bg" d="M18 2a16 16 0 1 1 0 32 16 16 0 0 1 0-32"></path>
+                <path class="ring-progress" d="M18 2a16 16 0 1 1 0 32 16 16 0 0 1 0-32"></path>
+            </svg>
+        </div>
+        <span>&uarr;</span>
+    </button>
+
     <!-- Footer -->
     <footer>
-        <p>&copy; <span id="year"></span> Creative Canvas Tool. All rights reserved.</p>
-        <a href="#">Privacy Policy</a>
-        <a href="#">Terms of Use</a>
+        <p>© 2024 Creative Canvas Tool. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
     </footer>
+
+    <!-- JavaScript for Scroll to Top Button -->
     <script>
-        // Toggle navigation on mobile
-        function toggleNav() {
-            document.querySelector(".nav-links").classList.toggle("show");
-        }
+        // Show button and update progress ring on scroll
+        const scrollToTopBtn = document.getElementById("scrollToTopBtn");
+        const ringProgress = document.querySelector(".ring-progress");
+
+        window.addEventListener("scroll", () => {
+            // Show/hide button
+            if (window.scrollY > 300) {
+                scrollToTopBtn.classList.add("show");
+            } else {
+                scrollToTopBtn.classList.remove("show");
+            }
+
+            // Update progress ring
+            const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
+            ringProgress.style.strokeDashoffset = 100 - scrollPercentage;
+        });
 
-        // Update the year
-        document.getElementById("year").textContent = new Date().getFullYear();
+        // Scroll to top when button clicked
+        scrollToTopBtn.addEventListener("click", () => {
+            window.scrollTo({ top: 0, behavior: "smooth" });
+        });
     </script>
 </body>
 </html>