diff --git a/ui/app.js b/ui/app.js
index bf7725b..6115184 100644
--- a/ui/app.js
+++ b/ui/app.js
@@ -3275,6 +3275,35 @@ function closeModal() {
 
 // ─── Event Bindings ────────────────────────────────────────
 function bindEvents() {
+    // ─── FLOATING QUICK-SCROLL NAVIGATION PANEL ENGINE (#116) ───
+    const terminalBodyElement = document.getElementById('terminal-body');
+    const btnScrollTop = document.getElementById('scroll-to-top');
+    const btnScrollBottom = document.getElementById('scroll-to-bottom');
+    const scrollActionsContainer = document.getElementById('terminal-scroll-actions');
+    const cliCommandInput = document.getElementById('cli-input');
+
+    // 1. Math modifier scroll event triggers
+    if (btnScrollTop && terminalBodyElement) {
+        btnScrollTop.addEventListener('click', () => {
+            terminalBodyElement.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    }
+
+    if (btnScrollBottom && terminalBodyElement) {
+        btnScrollBottom.addEventListener('click', () => {
+            terminalBodyElement.scrollTo({ top: terminalBodyElement.scrollHeight, behavior: 'smooth' });
+        });
+    }
+
+    // 2. Clear typing space visibility management (translucent on focus)
+    if (cliCommandInput && scrollActionsContainer) {
+        cliCommandInput.addEventListener('focus', () => {
+            scrollActionsContainer.classList.add('input-focused');
+        });
+        cliCommandInput.addEventListener('blur', () => {
+            scrollActionsContainer.classList.remove('input-focused');
+        });
+    }
     // Terminal Search
     const cliSearchInput = document.getElementById('cli-search-input');
     if (cliSearchInput) {
diff --git a/ui/index.html b/ui/index.html
index 58399eb..94f0e7f 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -399,6 +399,19 @@ <h2>Scripts</h2>
                         <span class="cli-prompt">$</span> <span class="cli-welcome-text">Welcome to DevShell. Select a
                             script to run, or type a command below.</span>
                     </div>
+                    <div class="floating-scroll-actions" id="terminal-scroll-actions">
+                        <button class="btn-scroll-target" id="scroll-to-top" title="Scroll to Top" aria-label="Scroll to top of terminal">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <polyline points="18 15 12 9 6 15"></polyline>
+                            </svg>
+                        </button>
+                        <button class="btn-scroll-target" id="scroll-to-bottom" title="Scroll to Bottom" aria-label="Scroll to bottom of terminal">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <polyline points="6 9 12 15 18 9"></polyline>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
 
                     <div class="terminal-scroll-shortcuts" id="terminal-scroll-actions">
                         <button class="scroll-action-btn" id="scroll-to-top-btn" title="Scroll to Top" aria-label="Scroll to top of terminal">
@@ -407,8 +420,7 @@ <h2>Scripts</h2>
                         <button class="scroll-action-btn" id="scroll-to-bottom-btn" title="Scroll to Bottom" aria-label="Scroll to bottom of terminal">
                             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                         </button>
-                    </div>
-                </div>
+                    </div>                </div>
 
                 <div class="cli-input-bar">
                     <span class="cli-prompt-input">$</span>
diff --git a/ui/style.css b/ui/style.css
index 312720a..95be9c4 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -3188,6 +3188,51 @@ body.light-theme #history-modal-search:focus {
     border-color: #3b82f6 !important;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
 }
+/* ─── FLOATING QUICK-SCROLL NAVIGATION COMPONENT (#116) ─── */
+#terminal-body {
+    position: relative; /* Contextually anchors absolute layouts */
+}
+
+#terminal-scroll-actions {
+    position: absolute;
+    bottom: 16px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    z-index: 10;
+    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+/* Make controllers translucent when typing to preserve viewport visibility */
+#terminal-scroll-actions.input-focused {
+    opacity: 0.25;
+}
+
+#terminal-scroll-actions:hover {
+    opacity: 1.0 !important;
+}
+
+.btn-scroll-target {
+    background-color: var(--bg-secondary, #161b22);
+    border: 1px solid var(--border-color, #30363d);
+    color: var(--text-muted, #8b949e);
+    border-radius: 6px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.btn-scroll-target:hover {
+    background-color: var(--border-color, #30363d);
+    color: var(--text-main, #c9d1d9);
+    border-color: var(--accent-blue, #58a6ff);
+}
 /* ─── LIGHT THEME OVERRIDES ─── */
 body.light-theme {
     background-color: #f8f9fa !important;