init Back to top

src/components/bs5/backToTop/backToTop.data.json

@@ -1,3 +1,6 @@
 {
-    "hide_back_to_top": false
+    "hide_back_to_top": false,
+    "text":"Back to top",   
+    "dynamic":false,
+    "offset": 100
 }

src/components/bs5/backToTop/backToTop.functions.js

@@ -1,16 +1,28 @@
 export function backToTop() {
     // Get the Back To Top object:
+    // The offset is the number of pixels after which the button is displayed
+    // The dynamic attribute is used to determine if the buttons CSS uses Relitive or Fixed positioning
+
     let mybutton = document.getElementById("backToTop");
+    let btnIsDynamic = mybutton.getAttribute("data-dynamic");
+
+    mybutton.addEventListener("click", goToTop);
 
-    // When the user scrolls down 30px from the top of the document, show the button
-    window.onscroll = function() {scrollFunction()};
+    if (btnIsDynamic == "true") {
+        mybutton.classList.remove("show");
+        window.onscroll = function() {scrollFunction()};
+    }
 
     function scrollFunction() {
-        if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
-            mybutton.classList.add("show");
-            mybutton.addEventListener("click", goToTop)
-        } else {
-            mybutton.classList.remove("show");
+        if (btnIsDynamic == "true") { 
+            let offset = mybutton.getAttribute("data-offset");
+            if (document.body.scrollTop > offset || document.documentElement.scrollTop > offset) {
+                mybutton.classList.add("show");
+                mybutton.setAttribute("aria-hidden", false);
+            } else {
+                mybutton.classList.remove("show");
+                mybutton.setAttribute("aria-hidden", true);
+            }
         }
     }
 

src/components/bs5/backToTop/backToTop.hbs

@@ -1,7 +1,7 @@
 {{#unless hide_back_to_top}}
-  <div class="qld__widgets">
-      <a href="#" id="backToTop" class="qld__btn qld__btn--floating qld__btn--back-to-top" aria-label="Back to top">
-        <span>Back to top</span>
+  <div class="qld__widgets {{#if dynamic}}fixed{{/if}}">
+      <a href="#" id="backToTop" class="qld__btn qld__btn--floating qld__btn--back-to-top show" data-offset="{{offset}}" data-dynamic="{{dynamic}}" aria-label="{{text}}">
+        <span>{{text}}</span>
       </a>
   </div>
 {{/unless}}

src/components/bs5/backToTop/backToTop.scss

@@ -4,17 +4,22 @@
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 .qld__widgets {
-    bottom:0.75rem;
-    right: 0.75rem;
-    align-items: flex-end;
     display: flex;
+    align-items: flex-end;
     flex-direction: column;
-    position: fixed;
+    position: relative;
     z-index: 1;
-
+    &.fixed {
+        position: fixed;
+        bottom:0.75rem;
+        right: 0.75rem;
+        z-index: 10;
+    }
+
     .qld__btn--floating {
       display: inline-block;
     }
+
   }
 
   .qld__widgets + .qld__footer {