Проста реалізація кнопки "наверх"

реалізація
проста

Кнопка "вгору" дозволяє перенести користувачеві на початок сторінки. Ця деталь є важливою зручністю для великих сторінок.

Кнопка з'явиться в нижньому правому куті сторінки після невеликої прокручування.

Якщо користувач продовжить прокручувати сторінку, прозорість посилання буде збільшена.

Створення структури

Вставимо посилання "Наверх" перед тегом, що закривається .

Додавання стилів

Посилання розміщуватиметься в нижньому правому кутку сторінки. Спочатку виставимо налаштування visibility: hidden; та opacity:0; .

Властивості visibility та opacity будуть задіяні за допомогою класів: .cd-is-visible та .cd-fade-out .

Ці класи додаються або видаляються до кнопки “Вгору” за допомогою jQuery.

Обробка подій

Для задуманого функціоналу нам знадобиться три змінні:

Змінна offset використовуватиметься для прикріплення/відкріплення класу .cd-is-visible ; offset_opacity для додавання класу .cd-fade-out.

Прокручування буде задіяно за допомогою jQuery методу .animate() , так само як і відстеження кліка за кнопкою “Вгору”.

Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: https://codyhouse.co/gem/back-to-top/ Переклав: Станіслав Протасевич Урок створений: 9 Лютого 2016 Переглядів: 6392 Правила передруку

5 останніх уроків рубрики "CSS"

Смішні ефекти для літер

Невеликий ефект з інтерактивною анімацією букв.

Реалізація кумедних підказок

Невеликий концепт кумедних підказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.

Анімовані літери

Експеримент: анімовані букви SVG на базі бібліотеки anime.js.

Сонцезахисні окуляри від першої особи

Прикольний експеримент веб-сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.

Навігація, що розкривається

Експериментальний скрипт навігації, що розкривається.