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

НовиниЗаписиCSSButton-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-а доцільніше робити у футері, тобто, наприкінці сторінки.