scroll to top functionality

.gitmodules

@@ -31,4 +31,4 @@
 [submodule "content-modules/opentelemetry-java-examples"]
 	path = content-modules/opentelemetry-java-examples
 	url = https://github.com/open-telemetry/opentelemetry-java-examples.git
-	javaexamples-pin = f9553ef
+	javaexamples-pin = 0f736ec

assets/js/scrollToTop.js

@@ -0,0 +1,63 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const scrollToTopBtn = document.getElementById("scrollToTopBtn");
+  const footer = document.querySelector(".td-footer");
+  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
+  function adjustButtonPosition() {
+    const footerTop = footer.getBoundingClientRect().top;
+    const windowHeight = window.innerHeight;
+
+    if (footerTop < windowHeight + 40) {
+      scrollToTopBtn.style.bottom = `${windowHeight - footerTop + 40}px`;
+    } else {
+      scrollToTopBtn.style.bottom = "40px";
+    }
+  }
+
+  // Show or hide the button with a fade effect and handle label transition
+  function toggleButtonVisibility() {
+    const scrollPosition =
+      document.body.scrollTop || document.documentElement.scrollTop;
+
+    if (scrollPosition > 200) {
+      scrollToTopBtn.classList.add("visible");
+
+      // Show the label after 3-4 page scrolls
+      const pageHeight = window.innerHeight;
+      if (scrollPosition > pageHeight * 3) {
+        scrollToTopBtn.classList.add("show-label");
+      } else {
+        scrollToTopBtn.classList.remove("show-label");
+      }
+
+      // Clear any existing timeout for hiding the button
+      if (hideTimeout) clearTimeout(hideTimeout);
+
+      // Hide the button after 2-3 seconds of inactivity
+      hideTimeout = setTimeout(() => {
+        scrollToTopBtn.classList.remove("visible");
+      }, 2500);
+    } else {
+      scrollToTopBtn.classList.remove("visible");
+      scrollToTopBtn.classList.remove("show-label");
+    }
+
+    adjustButtonPosition();
+  }
+
+  scrollToTopBtn.onclick = function () {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  window.addEventListener("scroll", toggleButtonVisibility);
+});

assets/scss/_styles_project.scss

@@ -25,14 +25,15 @@
   margin-top: 1rem;
   margin-bottom: 1rem;
 
-  > ul {
+  >ul {
     list-style: none;
     margin: 0;
     padding: 0;
 
-    > li {
+    >li {
       display: inline;
-      > a {
+
+      >a {
         @extend .btn;
         margin: 0.25rem;
 
@@ -47,7 +48,10 @@
 .l-get-started-buttons {
   @extend .l-buttons;
 
-  > ul > li > a /*, > p > a*/ {
+  >ul>li>a
+
+  /*, > p > a*/
+    {
     @extend .btn-lg;
     @extend .btn-secondary;
   }
@@ -56,7 +60,7 @@
 .l-primary-buttons {
   @extend .l-buttons;
 
-  > ul > li > a {
+  >ul>li>a {
     @extend .btn-lg;
     @extend .btn-primary;
   }
@@ -67,7 +71,10 @@
   @extend .l-buttons;
   justify-content: left;
 
-  > ul > li > a /*, > p > a*/ {
+  >ul>li>a
+
+  /*, > p > a*/
+    {
     @extend .btn-lg;
     @extend .btn-primary;
     padding: 20px;
@@ -80,7 +87,10 @@
   @extend .l-buttons;
   justify-content: left;
 
-  > ul > li > a /*, > p > a*/ {
+  >ul>li>a
+
+  /*, > p > a*/
+    {
     @extend .btn-lg;
     @extend .btn-secondary;
     padding: 20px;
@@ -95,9 +105,11 @@
     @include media-breakpoint-up(md) {
       padding: 0;
     }
+
     svg {
       height: 48px;
     }
+
     .navbar-brand__name {
       display: none;
     }
@@ -127,6 +139,7 @@
 
     a {
       color: white;
+
       &.external-link:after {
         display: none;
       }
@@ -167,7 +180,7 @@
 .community-contribution {
   text-align: center;
 
-  & > p {
+  &>p {
     font-size: $h3-font-size;
     font-weight: $headings-font-weight;
     line-height: $headings-line-height;
@@ -192,6 +205,7 @@
 
     summary {
       display: block;
+
       &::-webkit-details-marker {
         display: none;
       }
@@ -226,9 +240,11 @@
     .td-byline {
       margin: 0 !important;
     }
+
     .article-meta {
       margin: 0;
     }
+
     p:first-of-type {
       @extend .small;
       opacity: 0.65;
@@ -321,9 +337,90 @@ details {
 // Workaround for iOS and macOS Safari 17+. For details see:
 // https://github.com/open-telemetry/opentelemetry.io/issues/3538
 
-.td-content .highlight > pre {
-  > .click-to-copy,
-  > code {
+.td-content .highlight>pre {
+
+  >.click-to-copy,
+  >code {
     overflow-y: auto;
   }
 }
+
+// Scroll-to-top button styling
+.scroll-container {
+  position: fixed;
+  bottom: 40px;
+  right: 20px;
+  z-index: 1000;
+
+  .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-icon {
+      font-size: 18px;
+      color: #007bff;
+      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
+
+      &:hover {
+        color: #0056b3;
+        transform: scale(1.2);
+      }
+    }
+
+    .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;
+    }
+
+    &.show-label .scroll-label {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .scroll-container {
+    .scroll-btn {
+      bottom: 20px;
+      right: 10px;
+
+      .scroll-icon {
+        font-size: 16px;
+      }
+    }
+  }
+}

layouts/partials/hooks/body-end.html

@@ -2,3 +2,5 @@
   {{ partial "script.html" (dict "src" "js/tracing.js") -}}
 {{ end -}}
 {{ partial "script.html" (dict "src" "js/navScroll.js") -}}
+{{ partial "scroll-to-top.html" }}
+{{ partial "script.html" (dict "src" "js/scrollToTop.js") -}}

layouts/partials/scroll-to-top.html

@@ -0,0 +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">Back to Top</span>
+  </button>
+</div>