Процес створення кнопки вгору почнемо з HTML розмітки. Як зображення будемо використовувати іконку в форматі шрифту (Glyphicon Halflings, Font Awesome або ін.).
Увага: Шрифт Font Awesome і стилі CSS повинні бути підключені до сторінки.
Після створення розмітки напишемо стилі CSS, які будуть розташовувати нашу кнопку в потрібному місці, ставити їй оформлення і змінювати колір її фону при наведенні курсору.
Кнопка для прокрутки сторінки вгору
- відображати кнопку чи ні, в залежності від того прокрутив користувач сторінку більше ніж на 200px вниз від верхнього краю чи ні;
- при натисканні на кнопку прокручувати сторінку вгору з анімацією.
У вищенаведеному прикладі була використана іконка fa-chevron-up з шрифту Font Awesome. Крім цієї іконки, можна використовувати будь-яку іншу іконку з цього шрифту або будь-якого іншого.
Приклади кнопок для прокрутки сторінки вгору
Зміна кольору кнопки вгору
При необхідності Ви можете налаштувати колір, розмір, розташування та багато інших параметрів кнопки вгору, просто змінивши вигляд вищепредставленими правил CSS. Наприклад, змінюючи колір заднього фону (background-color) Ви можете отримати наступні кнопки:
Зміна кольору кнопки вгору за допомогою CSS-властивості background-color