Щоб зробити з'являється кнопку «Вгору» за допомогою CSS, скористаємося властивістю z-index - сховаємо кнопку за нерухомою областю. розміром трохи більшим самої кнопки, фон якої буде таким же, як і фон сайту.
Контейнер-кнопка «button»
- Створюємо контейнер з кнопкою:
- Пишемо для нього стилі:
display: block; визначаємо, що відображати дане посилання потрібно як блок. background: url ( 'шлях + до + зображенню') center no-repeat; робимо кнопку фоном блоку, вказуючи браузеру, що його потрібно помістити в центрі і не повторювати. height: 32px; width: 32px; висота і ширина блоку відповідно (їх беремо виходячи з розмірів зображення кнопки). position: fixed; bottom: 10px; right: 10px; фіксуємо блок і розташовуємо його на відстані 10px від нижнього краю браузера і 10px від правого. z-index: 1; поміщаємо блок на 1-ий рівень.
Контейнер-кришка «cap»
Контейнер-кришка буде закривати кнопку, якщо сторінка поміщається у вікно браузера і скролінгу немає.
- HTML:
- CSS:
background-color: колір + фону + сайта; встановлюємо фон блоку таким же, як і фон сайту. height: 32px; width: 32px; висота і ширина блоку відповідно (їх беремо також виходячи з розмірів зображення кнопки або трохи більше). position: absolute; bottom: 10px; right: 10px; робимо блок не фіксованим як попередній, а абсолютно позиційованим і розташовуємо його на відстані 10px від нижнього краю браузера і 10px від правого. z-index: 2; поміщаємо блок на 2-ий рівень, тобто вище блоку з кнопкою.