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

demosourse

Кнопка "наверх" позволяет перенестись пользователю на начало страницы. Данная деталь является немаловажным удобством для больших страницы.

Кнопка будет появляться в нижнем правом углу страницы после небольшой прокрутки.

Если пользователь продолжит прокручивать страницу, то прозрачность ссылки будет увеличена.

Создание структуры

Вставим ссылку “Наверх” перед закрывающемся тегом <body>.

<body>
	<!-- контент -->

	<a href="#0" class="cd-top">Top</a>

	<!-- ссылки на скрипты -->
</body>

Добавление стилей

Ссылка будет располагаться в нижнем правом углу страницы. Изначально выставим настройки visibility:hidden; и opacity:0;.

Свойства visibility и opacity будут задействованы с помощью классов: .cd-is-visible и .cd-fade-out.

.cd-top.cd-is-visible {
  /* кнопка становится видимой */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* при прокрутке, уменьшим значение opacity */
  opacity: .5;
}

Данные классы добавляются или удаляются к кнопке “Наверх” с помощью jQuery.

Обработка событий

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

//количество пикселей после прокрутки которой появится кнопка "Наверх"
var offset = 300,
//количество пикселей после прокрутки которой степень прозрачности будет увеличена
offset_opacity = 1200,
//время за которое будет осуществлена прокрутка (в милисекундах)
scroll_top_duration = 700;

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

Прокрутка будет задействована с помощью jQuery метода .animate(), так же как и отслеживание клика по кнопе “Наверх”.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/back-to-top/
Перевел: Станислав Протасевич
Урок создан: 9 Февраля 2016
Просмотров: 7641
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^