feat: add to top button as an option

This commit is contained in:
Henk Verlinde 2022-06-21 20:52:44 +02:00
parent 75d250b240
commit dd6f7b578b
4 changed files with 32 additions and 0 deletions

20
assets/js/to-top.js Normal file
View File

@ -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';
}
}

View File

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

View File

@ -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-3 pb-lg-5 pe-3 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>

View File

@ -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" -}}