add scroll to top button

assets/js/scroll-to-top.js

@@ -0,0 +1,19 @@
+// Get the button
+let scrollToTopBtn = document.getElementById('scrollToTopBtn');
+
+// When the user scrolls down 200px from the top of the document, show the button
+window.onscroll = function () {
+  if (
+    document.body.scrollTop > 200 ||
+    document.documentElement.scrollTop > 200
+  ) {
+    scrollToTopBtn.style.display = 'block';
+  } else {
+    scrollToTopBtn.style.display = 'none';
+  }
+};
+
+// Scroll to the top when the button is clicked
+scrollToTopBtn.onclick = function () {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+};

assets/scss/_registry.scss

@@ -39,3 +39,31 @@
 .registry-entry {
   @extend .shadow;
 }
+
+// Scroll-to-top button styling
+.scroll-to-top-btn {
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 12px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: none; // Initially hidden
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .scroll-to-top-btn {
+    bottom: 20px;
+    right: 20px;
+    padding: 10px;
+  }
+}

content/en/ecosystem/registry/_index.md

@@ -29,6 +29,12 @@ weight: 20
 
 {{% /blocks/lead %}}
 
+<div style="text-align: center; margin-top: 20px;">
+<button id="scrollToTopBtn" class="scroll-to-top-btn">
+    <i class="fas fa-arrow-up"></i>
+</button>
+</div>
+
 {{< blocks/section color="white" type="container-lg" >}}
 
 {{< ecosystem/registry/search-form >}}

layouts/_default/baseof.html

@@ -19,3 +19,6 @@
     {{ partialCached "scripts.html" . }}
   </body>
 </html>
+
+{{ $js := resources.Get "js/scroll-to-top.js" | minify | fingerprint }}
+<script src="{{ $js.Permalink }}"></script>