added back to top button

files/global.css

@@ -164,6 +164,18 @@ figure {
   object-fit: contain;
 }
 
+#totop {
+  display: none;
+  position: fixed;
+  bottom: 40px;
+  right: 30px;
+  z-index: 99;
+  cursor: pointer;
+  padding: 14px;
+  border-radius: 10px;
+  border-style: none;
+}
+
 /* Responsive layout - makes a four column-layout instead of eight columns */
 @media screen and (max-width: 1000px) {
   .column {

templates/index.html.j2

@@ -94,6 +94,7 @@
     {%- endif %}
     <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank">StaticGalleryBuilder</a></a> by <a href="https://github.com/greflm13"
         target="_blank">Flo Greistorfer</a>.</span>
+    <button onclick="topFunction()" id="totop" title="Back to Top">Back to Top</button>
   </div>
   {%- endif %}
   {%- else %}
@@ -101,6 +102,7 @@
     <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank" rel="noopener noreferrer">StaticGalleryBuilder</a></a> by <a
         href="https://github.com/greflm13"
         target="_blank" rel="noopener noreferrer">Flo Greistorfer</a>.</span>
+    <button onclick="topFunction()" id="totop" title="Back to Top">Back to Top</button>
   </div>
   {%- endif %}
   {% if images %}
@@ -150,10 +152,8 @@
     var re = /pid=(\d+)/;
 
     function openSwipe(img) {
-      // define options (if needed)
       var options = {
-        // optionName: 'option value'
-        index: img // start at first slide
+        index: img
       };
       var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
       gallery.init();
@@ -163,6 +163,23 @@
       var pid = window.location.href.match(re)[1];
       openSwipe(parseInt(pid));
     }
+
+    let totopbutton = document.getElementById("totop");
+
+    window.onscroll = function () { scrollFunction() };
+
+    function scrollFunction() {
+      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        totopbutton.style.display = "block";
+      } else {
+        totopbutton.style.display = "none";
+      }
+    }
+
+    function topFunction() {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    }
   </script>
   {%- endif %}
 </body>

themes/carnation.css

@@ -78,6 +78,12 @@
   background-color: var(--bcolor4);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);

themes/cornflower.css

@@ -78,6 +78,12 @@
   background-color: var(--bcolor4);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);

themes/default-dark.css

@@ -56,6 +56,11 @@
   background-color: var(--bcolor2);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
 
 body {
   color: var(--bcolor1);

themes/default.css

@@ -56,6 +56,11 @@
   background-color: var(--color2);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
 
 body {
   color: var(--bcolor2);

themes/ivy.css

@@ -78,6 +78,10 @@
   background-color: var(--bcolor4);
 }
 
+#totop {
+  background-color: var(--color1);
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);

themes/kjoe.css

@@ -76,6 +76,11 @@
   background-color: var(--bcolor3);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
 
 body {
   color: var(--bcolor1);

themes/monokai-vibrant.css

@@ -59,6 +59,11 @@
   background-color: var(--bcolor5);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
 
 body {
   color: var(--bcolor1);

themes/rainbow.css

@@ -80,6 +80,12 @@
   background-color: var(--bcolor4);
 }
 
+#totop {
+  background-color: var(--color2);
+  color: var(--bcolor4);
+  font-weight: 800;
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);

themes/sunflower.css

@@ -78,6 +78,12 @@
   background-color: var(--bcolor4);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);