Add static/js/back_to_top.js
This commit is contained in:
parent
a3de0df91b
commit
6830f65ba3
1 changed files with 30 additions and 0 deletions
30
static/js/back_to_top.js
Normal file
30
static/js/back_to_top.js
Normal file
|
|
@ -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);
|
||||||
Loading…
Add table
Add a link
Reference in a new issue