arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана настройка кнопки «Наверх» через нативный виджет Button Up: стилизация (размер, скругление, замена стандартной иконки на кастомную), фиксированное позиционирование с z-index чтобы кнопка не перекрывалась контентом, отступы справа и снизу в процентах, настройка скорости прокрутки при клике. Виджет Button Up специально создан для этой задачи — он знает, что при клике нужно прокрутить страницу в начало. Остаётся только стилизовать внешний вид. Отступы в процентах вместо пикселей обеспечивают корректное позиционирование на разных экранах. Кнопка «Наверх» появляется только на опубликованном сайте, не в редакторе — проверяй результат через предпросмотр. Никаких предварительных знаний не нужно, урок короткий и конкретный.

Как сделать кнопку «Наверх»

На длинных страницах пользователь листает до конца — и не может вернуться наверх. Хочется кнопку «наверх», но непонятно: какой виджет брать? Как зафиксировать её на экране, чтобы она была видна при любой прокрутке?
Кнопка «наверх» в Taptop — виджет Button Up: он знает, что при клике нужно прокрутить страницу в начало. Стилизуешь: убираешь текст, добавляешь иконку, задаёшь размер. Фиксированное позиционирование делает её видимой всегда. Для всех, кто верстает длинные страницы. После просмотра добавляешь кнопку «наверх» за пять минут.
Тайминги видео
00:00 — Виджет Button Up: добавление и стилизация 01:00 — Фиксированное позиционирование и z-index 01:45 — Скорость прокрутки и проверка на сайте

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока