Как сделать кнопку «Наверх» для длинных страниц
Разделы
- Все
- Блог 6
- Начало работы 10
- Интернет магазин 21
- Домены 16
- Заявки и заказы 5
- Продвижение сайтов 23
- Интеграции 28
- Повышение конверсии 5
- Тарифы и оплата 4
- Редактор конструктора 61
- Технические вопросы и частые ошибки 87
- Другие вопросы 3507
- Создание сайтов 237
- Копирайтинг 51
- Интернет маркетинг 7590
- Текстовые редакторы 281
- Бизнес обучение 437
- Фоторедакторы 505
- Заработок в интернете 125
Длинные страницы с большим количеством контента (статьи, лендинги, каталоги) создают одну проблему: пользователю становится неудобно листать обратно в начало. Решение этой проблемы — плавающая кнопка «Наверх» (Back to Top). Она появляется, когда человек пролистал вниз, и одним кликом возвращает его к шапке сайта или навигации. В этой инструкции мы создадим такую кнопку с нуля, используя HTML, CSS и JavaScript. Мы сделаем её стильной, плавной и удобной.
Подготовка HTML-структуры
Первым делом нужно добавить саму кнопку в тело документа. Обычно её размещают в самом конце страницы (перед закрывающим тегом ), чтобы она не мешала загрузке контента, но это не строгое правило.
Но сначала добавьте блок, куда будете прописывать ваш HTML код. Чтобы добавить блок, зайдите на сайт в режиме редактирования и в разделе Служебные модули выберите блок №50, который называется пользовательский код. Где найти блок, показали на скриншоте
После того, как добавили блок, пропишите внутри код, который приведен ниже. И нажмите кнопку Сохранить.