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