Напевно ви бачили на багатьох сайтах кнопки, які рухаються одночасно з прокруткою сторінки. Частим прикладом таких кнопок може бути акція, замовлення дзвінка або стрілка, що дозволяє прокрутити сторінку вгору.
Принцип дії всіх таких кнопочок грунтується на властивості position: fixed; Розглянемо html структуру нижче:
Ми створили просту кнопку з класом fixedbut, на яку призначили стиль. У стилі найголовніше зверніть на властивість position: fixed; - воно і дозволяє кнопці завжди "плавати" на екрані сайту, а bottom: 20px; right: 20px; встановлюють її знизу, праворуч. Щоб кнопка була по лівому краю змініть right на left. Інші стилі для краси.
Але наша кнопка не активна на клік. Давайте додамо перехід на будь-яку сторінку, по її кліку. Це можна зробити так:
або за допомогою звичайного посилання:
Якщо вам потрібно кнопка наверх, то можете в обох випадках значення посилання замінити на #. Сторінка перемотано наверх при кліці на кнопку.
Розглянемо ще пару булочок, які вам можуть стати в нагоді не тільки в цьому проекті.
1. Щоб кнопка (та й будь-який елемент, на який може призначатися псевдоклас: hover) плавно змінювала колір, додайте в клас fixedbut властивість: -webkit-transition: 0.33s all ease-out; -o-transition: 0.33s all ease-out; transition: 0.33s all ease-out;
2. Якщо вам потрібно заборонити спрацьовування кліка по посиланню або виконання скрипта, додайте властивість: pointer-events: none; Наприклад, якщо клікнути на посилання: Бонус! переходу за посиланням не відбудеться.
3. Щоб при кліці на посилання, сторінка відкрилася в новій вкладці, додайте атрибут target = "_ blank".
Читайте також
- Плаваюче меню на сайті за допомогою css
- Створюємо вікна по центру екрана JQuery + css: position absolute
- Отримати, призначити CSS стиль в JQuery
- Як поміняти порядок div блоків в мобільній версії за рахунок css
