_

tab/css/common.css

@@ -2,10 +2,12 @@ img {
     pointer-events: none;
     user-select: none;
 }
+
 .img-selectable {
     pointer-events: all !important;
     user-select: all !important;
 }
+
 [constHide],
 [hide] {
     display: none !important;
@@ -107,21 +109,33 @@ img {
 .code-menu {
     position: relative;
 }
+
 .code-menu-container-absolute {
     position: absolute;
     top: 0;
     right: 0;
 }
+
 .code-menu-container-relative {
     position: relative;
     top: 0;
     right: 0;
 }
+
 .help-open {
     position: fixed;
     right: 0;
     bottom: 0;
     margin-right: 15px;
     margin-bottom: 15px;
     z-index: 999;
+}
+
+.scroll-up {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    z-index: 999;
 }

tab/html/focus.html

@@ -64,7 +64,8 @@
         <div class="uk-width-expand">
             <div class="uk-flex uk-flex-right uk-flex-middle">
                 <div>
-                    <img CapturePreview uk-img uk-toggle="target: #modal-CapturePreview" uk-tooltip="title: CapturedImage; pos: bottom">
+                    <img CapturePreview uk-img uk-toggle="target: #modal-CapturePreview"
+                        uk-tooltip="title: CapturedImage; pos: bottom">
                     <div id="modal-CapturePreview" uk-modal class="uk-modal-container">
                         <div class="uk-modal-dialog uk-modal-body">
                             <button class="uk-modal-close-outside" type="button" uk-close></button>
@@ -142,6 +143,10 @@
                                 <mark-down src="/docs/help/Tails.md"></mark-down>
                             </div>
                         </div>
+
+                        <div class="uk-text-right scroll-up">
+                            <button ScrollUp class="uk-icon-link" uk-icon="chevron-up" uk-tooltip="Scroll up"></button>
+                        </div>
                     </div>
                 </div>
             </div>

tab/html/index.html

@@ -75,6 +75,10 @@
                                 <mark-down src="/docs/LICENSE.md"></mark-down>
                             </div>
                         </div>
+
+                        <div class="uk-text-right scroll-up">
+                            <button ScrollUp class="uk-icon-link" uk-icon="chevron-up" uk-tooltip="Scroll up"></button>
+                        </div>
                     </div>
                 </div>
             </div>

tab/js/focus.js

@@ -678,6 +678,16 @@ import { BlueFoxJs } from "/modules/BlueFoxJs/bluefox.es.min.js";
             );
           });
         },
+        "[ScrollUp]": async ($) => {
+          $.element.addEventListener("click", async (event) => {
+            let modal_body = document.querySelector("#modal-overflow > div .uk-modal-body");
+            modal_body.scrollBy({
+              top: modal_body.scrollHeight * -1,
+              left: modal_body.scrollWidth * -1,
+              behavior: "smooth",
+            });
+          });
+        },
       });
       await BlueFoxJs.Sync.view();
 

tab/js/index.js

@@ -359,7 +359,17 @@ window.BlueFoxScript = class extends BlueFoxScript {
           );
           menu.append(button);
           $.element.className ? $.element.parentElement.prepend(menu) : $.element.append(menu);
-        }
+        },
+        "[ScrollUp]": async ($) => {
+          $.element.addEventListener("click", async (event) => {
+            let modal_body = document.querySelector("#modal-overflow > div .uk-modal-body");
+            modal_body.scrollBy({
+              top: modal_body.scrollHeight * -1,
+              left: modal_body.scrollWidth * -1,
+              behavior: "smooth",
+            });
+          });
+        },
       });
       BlueFoxJs.Sync.view();
     }