Небольшой скрипт, который позволяет разместить на сайте кнопку "прокрутки к шапке" и интерактивным отображением процента прокрутки страницы.
Основная магия основана на css свойстве background-image: conic-gradient и возможность из JavaScript изменять css переменные.
Результат можно посмотреть в демке.
Упрощенный вариант можно посмотреть в статье как сделать плавный скрол до шапки.
HTML
<div id="scrollup" class="scrollup">
<i class="fas fa-angle-up"></i>
</div>
CSS
:root {
--pie-percent : 0;
}
#scrollup {
position: fixed;
width: 60px;
height: 60px;
/*display: flex;*/
bottom: 30px;
right: 25px;
cursor: pointer;
transition: .75s ease;
border-radius: 50%;
text-align: center;
color: rgb(15, 160, 39);
background-color: rgba(0,0,0,.1);
transform: translateX(90px) rotate(360deg);
/* ! border: 1px solid rgba(255,255,255,.15); */
outline: 0;
background-image: conic-gradient(#EE6E39 var(--pie-percent), transparent 0);
}
#scrollup._on {
transform: translateX(0) rotate(0);
}
#scrollup:hover {
color: rgb(250, 160, 39);
background: #032028;
}
#scrollup i {
font-size: 28px;
padding: 0;
margin: auto;
}
Тут стоит обратить внимание на
background-image: conic-gradient(#EE6E39 var(--pie-percent), transparent 0); - как раз использую градиент мы и будет закрашивать нужную нам часть круга.
Java script
const scrollup = document.getElementById("scrollup");
function getPageOffset () {
return window.pageYOffset || document.documentElement.scrollTop;
}
function currentScrollPercentage()
{
return ((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100);
}
function updateScrollup () {
const piePercent = currentScrollPercentage();
scrollup.style.setProperty('--pie-percent', piePercent + '%');
}
// scroll to
scrollup.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
// Show on
window.addEventListener('scroll', function() {
updateScrollup();
if (getPageOffset() > 150) {
scrollup.classList.add("_on");
} else {
scrollup.classList.remove("_on");
}
});