45 lines
1.7 KiB
JavaScript
45 lines
1.7 KiB
JavaScript
(function () {
|
|
const scrollToTopDom = document.querySelector('.scroll-to-top');
|
|
const headerProgressDom = document.querySelector('.header-progress');
|
|
|
|
const backToTop = () => {
|
|
let scrollTopTimer = setInterval(function () {
|
|
let top = document.body.scrollTop || document.documentElement.scrollTop;
|
|
let speed = top / 2;
|
|
if (document.body.scrollTop !== 0) {
|
|
document.body.scrollTop -= speed;
|
|
} else {
|
|
document.documentElement.scrollTop -= speed;
|
|
}
|
|
if (top === 0) {
|
|
clearInterval(scrollTopTimer);
|
|
}
|
|
}, 30);
|
|
};
|
|
|
|
scrollToTopDom.addEventListener('click', () => {
|
|
backToTop();
|
|
});
|
|
|
|
window.addEventListener('scroll', function (_e) {
|
|
// back to top & show scroll percent
|
|
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
|
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
|
|
const clientHeight = window.innerHeight || document.documentElement.clientHeight;
|
|
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
|
|
const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
|
|
|
|
if (percent === '0') {
|
|
scrollToTopDom.style.display = 'none';
|
|
headerProgressDom.style.display = 'none';
|
|
} else {
|
|
scrollToTopDom.style.display = 'block';
|
|
// scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent;
|
|
|
|
headerProgressDom.style.display = 'block';
|
|
headerProgressDom.style.width = `${ProgressPercent}%`;
|
|
}
|
|
});
|
|
|
|
})();
|