Merge pull request #794 from h-enk/back-to-top-button

Add to top button as an option

assets/js/to-top.js

@@ -0,0 +1,20 @@
+var topbutton = document.getElementById('toTop');
+
+if (topbutton !== null) {
+
+  topbutton.style.display = 'none';
+  window.onscroll = function() {
+    scrollFunction()
+  };
+
+}
+
+function scrollFunction() {
+
+  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
+    topbutton.style.display = 'block';
+  } else {
+    topbutton.style.display = 'none';
+  }
+
+}

config/_default/params.toml

@@ -92,6 +92,7 @@ lastMod = false
   docsVersioning = false
   fullWidth = false
   navbarSticky = true
+  toTopButton = false
 
 [menu]
   [menu.section]

layouts/_default/baseof.html

@@ -23,5 +23,10 @@
     {{ block "sidebar-footer" . }}{{ end }}
     {{ partial "footer/footer.html" . }}
     {{ partial "footer/script-footer.html" . }}
+    {{ if eq .Site.Params.options.toTopButton true -}}
+    <div class="d-flex fixed-bottom pb-4 pb-lg-5 pe-4 pe-lg-5">
+      <a id="toTop" href="#" class="btn btn-outline-primary rounded-circle ms-auto p-2"><span class="visually-hidden">Top</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg></a>
+    </div>
+    {{ end }}
   </body>
 </html>

layouts/partials/footer/script-footer.html

@@ -60,6 +60,12 @@
 {{ $scrollLock := resources.Get "js/scroll-lock.js" | js.Build -}}
 {{ $slice = $slice | append $scrollLock -}}
 
+{{ if .Site.Params.options.toTopButton -}}
+  {{ $toTopButton := resources.Get "js/to-top.js" -}}
+  {{ $toTopButton := $toTopButton | js.Build -}}
+  {{ $slice = $slice | append $toTopButton -}}
+{{ end -}}
+
 {{ $js := $slice | resources.Concat "main.js" -}}
 
 {{ if eq (hugo.Environment) "development" -}}