scroll to top functionality

assets/js/scrollToTop.js

@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', function () {
+  let scrollToTopBtn = document.getElementById('scrollToTopBtn');
+  let footer = document.querySelector('.td-footer');
+
+  if (!scrollToTopBtn || !footer) return;
+
+  function adjustButtonPosition() {
+    let footerTop = footer.getBoundingClientRect().top;
+    let windowHeight = window.innerHeight;
+
+    if (footerTop < windowHeight + 40) {
+      scrollToTopBtn.style.bottom = windowHeight - footerTop + 40 + 'px';
+    } else {
+      scrollToTopBtn.style.bottom = '40px';
+    }
+  }
+
+  window.onscroll = function () {
+    if (
+      document.body.scrollTop > 200 ||
+      document.documentElement.scrollTop > 200
+    ) {
+      scrollToTopBtn.style.display = 'block';
+    } else {
+      scrollToTopBtn.style.display = 'none';
+    }
+
+    adjustButtonPosition();
+  };
+
+  scrollToTopBtn.onclick = function () {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+});

assets/scss/_styles_project.scss

@@ -32,6 +32,7 @@
 
     > li {
       display: inline;
+
       > a {
         @extend .btn;
         margin: 0.25rem;
@@ -47,7 +48,9 @@
 .l-get-started-buttons {
   @extend .l-buttons;
 
-  > ul > li > a /*, > p > a*/ {
+  >ul>li>a
+
+  /*, > p > a*/ {
     @extend .btn-lg;
     @extend .btn-secondary;
   }
@@ -67,7 +70,9 @@
   @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 +85,9 @@
   @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 +102,11 @@
     @include media-breakpoint-up(md) {
       padding: 0;
     }
+
     svg {
       height: 48px;
     }
+
     .navbar-brand__name {
       display: none;
     }
@@ -127,6 +136,7 @@
 
     a {
       color: white;
+
       &.external-link:after {
         display: none;
       }
@@ -192,6 +202,7 @@
 
     summary {
       display: block;
+
       &::-webkit-details-marker {
         display: none;
       }
@@ -226,9 +237,11 @@
     .td-byline {
       margin: 0 !important;
     }
+
     .article-meta {
       margin: 0;
     }
+
     p:first-of-type {
       @extend .small;
       opacity: 0.65;
@@ -327,3 +340,21 @@ details {
     overflow-y: auto;
   }
 }
+
+// Scroll-to-top button styling
+.scroll-container {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.scroll-btn {
+  background-color: #007bff;
+  color: white;
+  bottom: 40px;
+  right: 40px;
+  display: none;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  border-radius: 50%;
+  position: fixed;
+}

layouts/partials/hooks/body-end.html

@@ -1,4 +1,6 @@
 {{ if hugo.IsProduction -}}
-  {{ partial "script.html" (dict "src" "js/tracing.js") -}}
+{{ 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,5 @@
+<div class="scroll-container">
+    <button id="scrollToTopBtn" class="scroll-btn btn" aria-label="Scroll to top" title="Scroll to top">
+        <i class="fas fa-arrow-up"></i>
+    </button>
+</div>