30 lines
No EOL
928 B
JavaScript
30 lines
No EOL
928 B
JavaScript
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); |