Шляхом Альбірео

Новини•Записи•CSS•Button-top
2021.08.30
Кнопка з анімацією на CSS і JS, одним файлом
Note

Кнопка оформлена у файлі button-top, має анімацію прозорості, та легко налаштовується зміною стилю. Варіанти кольору і форми кнопки знаходяться в коді snippet-а у вигляді коментарів. Без додаткових залежностей, все в одному файлі. За символ кнопки взятий png-малюнок, який конвертований у image/png;base64 заради монофайлу.



/* Стилізація кнопки і анімація. */
[HTML]
<style>
#btn-top {
	display: none;
	position: fixed;
	bottom: 50%;
	right: 5%;
	z-index: 999;
	font-size: 3rem;
	border: none;
	outline: 0;
	background-color: transparent;
	cursor: pointer;
	opacity: .3;
	transition: all .5s ease-in-out
}

#btn-top:hover {
	background-color: transparent;
	opacity: 0.8
}
</style>

<button onclick="topSlow()" id="btn-top" title="Наверх"> СЮДИ ВСТАВИТИ base64-КОД ПОТРІБНОГО МАЛЮНКА </button>

<script>
function scrollFunction() {
	document.body.scrollTop > 50 || document.documentElement.scrollTop > 50 ? mybutton.style.display = "block" : mybutton.style.display = "none"
}

function topSlow() {
	window.scrollBy(0, -30), window.pageYOffset > 0 && requestAnimationFrame(topSlow)
}
var mybutton = document.getElementById("btn-top");
window.onscroll = function() {
	scrollFunction()
};
</script>
Note

Зразки кнопок, що конвертовані у image/png;base64, та можуть бути використані у файлі скрипта:

Кожному малюнку відповідає свій блок <img src="data:image/png;base64, ..>, його потрібно додати між тегами <button></button> в коді, який приведений вище. Підключення snippet-а доцільніше робити у футері, тобто, наприкінці сторінки.