diff --git a/ui/main.js b/ui/main.js index 11cb74b..ada3b43 100644 --- a/ui/main.js +++ b/ui/main.js @@ -6,6 +6,8 @@ import './bootstrap' import RelativeTime from 'dayjs/plugin/relativeTime' // ES 2015 dayjs.extend(RelativeTime) +import './src/js/scroll-to-top' + // For node attribute table functionality import 'bootstrap/js/dist/tab' diff --git a/ui/src/js/scroll-to-top.js b/ui/src/js/scroll-to-top.js new file mode 100644 index 0000000..d6c1fdb --- /dev/null +++ b/ui/src/js/scroll-to-top.js @@ -0,0 +1,25 @@ + +let scrollToTopBtn = document.getElementById("btn-scroll-to-top"); +let fourViewports = window.innerHeight * 4; + +window.onscroll = function () { + scrollFunction(); +}; + +function scrollFunction() { + if ( + document.body.scrollTop > fourViewports || + document.documentElement.scrollTop > fourViewports + ) { + scrollToTopBtn.style.display = "block"; + } else { + scrollToTopBtn.style.display = "none"; + } +} + +scrollToTopBtn.addEventListener("click", backToTop); + +function backToTop() { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; +} diff --git a/ui/src/scss/custom.scss b/ui/src/scss/custom.scss index 7937dfc..6a30a83 100644 --- a/ui/src/scss/custom.scss +++ b/ui/src/scss/custom.scss @@ -99,3 +99,11 @@ $color-mode-type: data; border-right-color: var(--bs-tertiary-color); } } + +#btn-scroll-to-top { + color: var(--bs-gray); + position: fixed; + bottom: 1rem; + right: 1rem; + display: none; +} diff --git a/ui/templates/layouts/footer.html b/ui/templates/layouts/footer.html index 9fa9940..2e2f1c3 100644 --- a/ui/templates/layouts/footer.html +++ b/ui/templates/layouts/footer.html @@ -13,3 +13,9 @@ +