Merge pull request #317 from tarunkumar2005/scroll-to-top

Added the scroll to top button feature with enhanced ui and better functioning.
swaraj-das · Oct 12, 2024 · f33d250 · f33d250
2 parents 5718a7c + f89e619
commit f33d250
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -532,9 +532,14 @@ <h2>Contact Us</h2>
 
 
     <!-- Scroll to Top Button -->
-    <div class="scroll-top" onclick="scrollToTop()">
+    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
+        <div class="scroll-top-icon">
         <ion-icon name="arrow-up-outline"></ion-icon>
-    </div>
+        </div>
+        <svg class="progress-ring" width="60" height="60">
+        <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30" cy="30"></circle>
+        </svg>
+    </button>  
 
     <!-- this script is for twitter icon  starts -->
     <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/script.js b/script.js
@@ -14,41 +14,63 @@ function toggleMenu() {
         menuList.style.paddingTop = "0px";
     }
 }
- window.onscroll = function() {
-    updateProgressBar();
-  };
-
-function updateProgressBar() {
-  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-  var scrollHeight =
-    document.documentElement.scrollHeight -
-    document.documentElement.clientHeight;
-  var scrollPercent = (scrollTop / scrollHeight) * 100;
-
-  document.getElementById("progressBar").style.width = scrollPercent + "%";
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-  console.log("Website loaded successfully!");
-});
 
 // Show or hide the scroll-top button based on scroll position
-window.addEventListener("scroll", function () {
-  const scrollTopButton = document.querySelector(".scroll-top");
+window.addEventListener('scroll', function() {
+  const scrollTopButton = document.querySelector('.scroll-top');
   if (window.pageYOffset > 300) {
-    scrollTopButton.style.display = "block";
+      scrollTopButton.style.display = 'block';
   } else {
-    scrollTopButton.style.display = "none";
+      scrollTopButton.style.display = 'none';
   }
 });
 
-// Smooth scroll to top when the button is clicked
-function scrollToTop() {
-  window.scrollTo({
-    top: 0,
-    behavior: "smooth",
-  });
-}
+document.addEventListener('DOMContentLoaded', function() {
+  const scrollToTopBtn = document.getElementById('scrollToTopBtn');
+  const progressRing = scrollToTopBtn.querySelector('circle');
+  const rootElement = document.documentElement;
+
+  const radius = progressRing.r.baseVal.value;
+  const circumference = radius * 2 * Math.PI;
+
+  progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
+  progressRing.style.strokeDashoffset = circumference;
+
+  function setProgress(percent) {
+      const offset = circumference - percent / 100 * circumference;
+      progressRing.style.strokeDashoffset = offset;
+  }
+
+  function handleScroll() {
+      const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
+      const scrolled = (rootElement.scrollTop / scrollTotal) * 100;
+
+      // Show or hide the scroll-to-top button based on scroll position
+      if (window.pageYOffset > 300) {
+          scrollToTopBtn.classList.add('show');
+      } else {
+          scrollToTopBtn.classList.remove('show');
+      }
+
+      // Update progress circle
+      requestAnimationFrame(() => {
+          setProgress(scrolled);
+      });
+  }
+
+  function scrollToTop() {
+      rootElement.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+      });
+  }
+
+  scrollToTopBtn.addEventListener('click', scrollToTop);
+  window.addEventListener('scroll', handleScroll);
+
+  // Initial check in case the page is already scrolled on load
+  handleScroll();
+});
 
 function toggleTheme() {
   const body = document.body;

diff --git a/style.css b/style.css
@@ -1030,23 +1030,90 @@ button:hover img {
 
 .scroll-top {
     position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background: #ff459f;
-    padding: 10px;
+    bottom: 1%;
+    right: 50%;
+    background: linear-gradient(145deg, #ff459f, #ff6062);
+    color: white;
+    width: 60px;
+    height: 60px;
     border-radius: 50%;
+    border: none;
     cursor: pointer;
-    display: none;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+    overflow: visible;
+    z-index: 10; /* Ensure button is on top */
+  }
+
+  .scroll-top.show {
+    opacity: 1;
+    visibility: visible;
   }
 
   .scroll-top:hover {
-    background: #ff6062;
+    transform: scale(1.1); /* Subtle scaling instead of expanding */
+    box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6); /* Slightly larger shadow */
   }
 
-  .hidden {
-    display: none;
-}
+  .scroll-top:active {
+    transform: scale(1.05); /* Minor scale reduction on click */
+  }
+
+  .scroll-top-icon {
+    position: relative;
+    z-index: 2;
+    transition: transform 0.3s ease;
+  }
+
+  .scroll-top:hover .scroll-top-icon {
+    transform: translateY(-3px);
+  }
+
+  /* Progress Ring Styling */
+  .progress-ring {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg); /* To start from the top */
+  }
+
+  .progress-ring__circle {
+    transition: stroke-dashoffset 0.35s;
+    transform-origin: 50% 50%;
+  }
+
+  /* Pulse Animation */
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+    }
+    50% {
+      box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
+    }
+    100% {
+      box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+    }
+  }
+
+  .scroll-top:hover {
+    animation: pulse 1.5s infinite;
+  }
+
+  .scroll-top.show {
+    animation: none; /* No animation when showing the button */
+  }
+
+  .scroll-top.show:hover {
+    animation: pulse 1.5s infinite; /* Pulse on hover */
+  }
 
 .searchbar-outer{
     width: 100%;