[UX] Modernize Back to Top button in Console Output

core/src/main/resources/hudson/model/Run/console.jelly

@@ -47,5 +47,9 @@ THE SOFTWARE.
 
     <j:set var="it" value="${it.object}" />
     <st:include page="console-log.jelly" />
+
+    <button class="jenkins-back-to-top jenkins-button" aria-label="${%Back to top}">
+      <l:icon src="symbol-chevron-up" />
+    </button>
   </l:run-subpage>
 </j:jelly>

src/main/js/app.js

@@ -7,6 +7,7 @@ import StopButtonLink from "@/components/stop-button-link";
 import ConfirmationLink from "@/components/confirmation-link";
 import Dialogs from "@/components/dialogs";
 import Defer from "@/components/defer";
+import BackToTop from "@/components/back-to-top";
 
 Dropdowns.init();
 CommandPalette.init();
@@ -17,3 +18,4 @@ Tooltips.init();
 StopButtonLink.init();
 ConfirmationLink.init();
 Dialogs.init();
+BackToTop.init();

src/main/js/components/back-to-top/index.js

@@ -0,0 +1,39 @@
+function init() {
+  const backToTopButton = document.querySelector(".jenkins-back-to-top");
+
+  if (!backToTopButton) {
+    return;
+  }
+
+  const threshold = 300;
+  let ticking = false;
+
+  const updateVisibility = () => {
+    if (window.scrollY > threshold) {
+      backToTopButton.classList.add("jenkins-back-to-top--visible");
+    } else {
+      backToTopButton.classList.remove("jenkins-back-to-top--visible");
+    }
+    ticking = false;
+  };
+
+  window.addEventListener(
+    "scroll",
+    () => {
+      if (!ticking) {
+        window.requestAnimationFrame(updateVisibility);
+        ticking = true;
+      }
+    },
+    { passive: true },
+  );
+
+  backToTopButton.addEventListener("click", () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  });
+}
+
+export default { init };

src/main/scss/components/_back-to-top.scss

@@ -0,0 +1,43 @@
+@use "../abstracts/mixins";
+
+.jenkins-back-to-top {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 900;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 50%;
+  padding: 0;
+  box-shadow: var(--dropdown-box-shadow);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--standard-transition),
+    visibility var(--standard-transition),
+    transform var(--standard-transition),
+    background-color var(--standard-transition);
+  transform: translateY(0.625rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  &:hover {
+    background-color: var(--button-background--hover);
+  }
+
+  &:active {
+    background-color: var(--button-background--active);
+  }
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}

src/main/scss/components/_index.scss

@@ -4,6 +4,7 @@
 @use "badges";
 @use "breadcrumbs";
 @use "buttons";
+@use "back-to-top";
 @use "cards";
 @use "command-palette";
 @use "content-blocks";