diff --git a/static/js/back_to_top.js b/static/js/back_to_top.js new file mode 100644 index 0000000..f503498 --- /dev/null +++ b/static/js/back_to_top.js @@ -0,0 +1,30 @@ +const progressElement = document.getElementById("progress"); +const progressValueElement = document.getElementById("progress-value"); + +const calcScrollValue = () => { + const scrollPosition = document.documentElement.scrollTop; + const totalHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; + + if (totalHeight > 0) { + const scrollPercent = Math.round((scrollPosition * 100) / totalHeight); + + if (scrollPosition > 100) { + progressElement.classList.add("active"); + } else { + progressElement.classList.remove("active"); + } + + progressElement.style.background = `conic-gradient(#0d6efd ${scrollPercent}%, #e6e6e6 ${scrollPercent}%)`; + } +}; + +progressElement.addEventListener("click", () => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); +}); + +window.addEventListener("scroll", calcScrollValue); + +window.addEventListener("load", calcScrollValue); \ No newline at end of file