Updated scroll-to-top functionality and styling

open-telemetry · Dec 15, 2024 · fdcd56b · fdcd56b
1 parent 518293f
commit fdcd56b
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 55 deletions.
diff --git a/assets/js/scrollToTop.js b/assets/js/scrollToTop.js
@@ -1,9 +1,15 @@
 document.addEventListener("DOMContentLoaded", function () {
   const scrollToTopBtn = document.getElementById("scrollToTopBtn");
   const footer = document.querySelector(".td-footer");
-  const scrollLabel = scrollToTopBtn.querySelector(".scroll-label");
+  const scrollLabel = scrollToTopBtn?.querySelector(".scroll-label");
   let hideTimeout;
 
+  // Check if the current page is the homepage
+  if (window.location.pathname === "/") {
+    if (scrollToTopBtn) scrollToTopBtn.style.display = "none";
+    return; // Exit early to prevent further execution on the homepage
+  }
+
   if (!scrollToTopBtn || !footer) return;
 
   // Function to adjust button position to avoid footer overlap
@@ -40,13 +46,13 @@ document.addEventListener("DOMContentLoaded", function () {
       // Hide the button after 2-3 seconds of inactivity
       hideTimeout = setTimeout(() => {
         scrollToTopBtn.classList.remove("visible");
-      }, 2500); 
+      }, 2500);
     } else {
       scrollToTopBtn.classList.remove("visible");
       scrollToTopBtn.classList.remove("show-label");
     }
 
-    adjustButtonPosition(); 
+    adjustButtonPosition();
   }
 
   scrollToTopBtn.onclick = function () {

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -346,65 +346,81 @@ details {
 }
 
 // Scroll-to-top button styling
-.scroll-btn {
+.scroll-container {
   position: fixed;
   bottom: 40px;
   right: 20px;
   z-index: 1000;
-  display: flex;
-  flex-direction: column; 
-  align-items: center;
-  justify-content: center;
-  background-color: #f1f1f1;
-  border: none;
-  border-radius: 50%;
-  width: 60px; 
-  height: 60px; 
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  opacity: 0; 
-  visibility: hidden; 
-  transition: all 0.3s ease-in-out;
-}
 
-.scroll-btn i {
-  font-size: 24px; 
-  color: #333;
-  margin-bottom: 4px; 
-  transition: transform 0.3s ease-in-out;
-}
+  .scroll-btn {
+    position: fixed;
+    bottom: 0;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease-in-out;
+    padding: 8px 16px;
+
+    &:hover {
+      background-color: #f1f1f1;
+      border: 2px solid #007bff;
+      border-top-right-radius: 20px;
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
-.scroll-btn:hover {
-  background-color: #007bff;
-}
+    .scroll-icon {
+      font-size: 18px;
+      color: #007bff;
+      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
 
-.scroll-btn:hover i {
-  color: #fff;
-  transform: scale(1.2);
-}
+      &:hover {
+        color: #0056b3;
+        transform: scale(1.2);
+      }
+    }
 
-.scroll-btn.visible {
-  opacity: 1; 
-  visibility: visible; 
-}
+    .scroll-label {
+      font-size: 12px;
+      font-family: "Roboto", Arial, sans-serif;
+      font-weight: 500;
+      color: #333;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+      text-align: center;
+    }
 
-.scroll-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #333;
-  opacity: 0; 
-  transform: translateY(10px); 
-  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
-  text-align: center;
-}
+    &.show-label .scroll-label {
+      opacity: 1;
+      transform: translateY(0);
+    }
 
-.scroll-btn.show-label .scroll-label {
-  opacity: 1; 
-  transform: translateY(0); 
+    &.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
 }
 
 @media (max-width: 768px) {
-  .scroll-label {
-    display: none;
+  .scroll-container {
+    .scroll-btn {
+      bottom: 20px;
+      right: 10px;
+
+      .scroll-icon {
+        font-size: 16px;
+      }
+    }
   }
 }
diff --git a/layouts/partials/scroll-to-top.html b/layouts/partials/scroll-to-top.html
@@ -1,6 +1,6 @@
 <div class="scroll-container">
-    <button id="scrollToTopBtn" class="scroll-btn btn" aria-label="Scroll to top" title="Scroll to top">
-      <i class="fas fa-chevron-up scroll-icon"></i> 
-      <span class="scroll-label">Top</span>
-    </button>
-  </div>
+  <button id="scrollToTopBtn" class="scroll-btn btn" aria-label="Scroll to top" title="Scroll to top">
+    <i class="fas fa-chevron-up scroll-icon"></i>
+    <span class="scroll-label">Back to Top</span>
+  </button>
+</div>