К основному содержимому

Kнопка «Наверх», фиксация любой кнопки

Как сделать кнопку, зафиксированную при прокрутке страницы? Как закрепить кнопку? Плавающая, бегающая кнопка

Анна avatar
Автор: Анна
Обновлено более 2 лет/г. назад


Содержание:

Вы можете создать кнопку, зафиксированную в определенной части экрана при прокрутке страницы.

С помощью фиксированной кнопки можно настроить:

  1. Кнопку «Наверх»: при нажатии на нее будет возврат к началу страницы. Также она будет исчезать на первом экране.

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

Если вы хотите настроить якоря, меню или другую навигацию по странице, то вам сюда: Навигация по странице


1. Как перенести компонент из библиотеки в редактор?

В редакторе страниц вы можете найти ссылки на библиотеку компонентов, в которой содержатся нестандартные виджеты.

В ней можно найти различные решения.

Нам сейчас подходит фиксация кнопки при прокрутке - номер 100.

Далее - размещаем любую секцию (например, «Пустая секция») в желаемом месте на странице.

Удобнее всего секцию с кнопкой будет разместить в самом конце страницы.

Переходим в меню копирования и выбираем «Импорт по номеру»

Указываем уже известный номер и наслаждаемся новым решением 🙂
Готово! Установка завершена. Осталось настроить кнопку под стиль сайта.

Важно: настраивать самую секцию (её фон, отступы и т.п.) не нужно, потому что на опубликованной версии страницы она отображаться не будет. Сконцентрируемся на самой кнопке, её расположении и функционале.

2. Настройки фиксированной кнопки

По умолчанию у кнопки установлен код для прокрутки наверх по клику:

Если вы хотите, чтобы кнопка выполняла другую функцию (например, отправка заявки или добавление товара), то просто переключите «Действие кнопки»:

Настраиваем желаемый внешний вид кнопки как обычно:

И переходим к настройкам отображения:

Положение кнопки в зафиксированном виде

Указываем положение кнопки - слева или справа и сверху или снизу.

Горизонтальный и вертикальный отступы

Этими ползунками определяется отступ от выбранной стороны, в процентах от величины экрана.
К примеру, если выбрать положение «слева» , то горизонтальный отступ отвечает за отступ от левой части экрана.

Прозрачность кнопки до наведения

Изменяем прозрачность до наведения курсора мыши на кнопку . Чем больше, тем более прозрачной она будет. 



✅ На одной странице может быть несколько таких секций. Например, одна секция для кнопки «Наверх». Другая - для обычной зафиксированной кнопки.

✅ В одном виджете допускается добавление нескольких кнопок. К примеру, как боковое меню для переходов по секциям страницы. Для этого достаточно перенести дополнительную кнопку с верхней панели редактора или скопировать имеющуюся:


Вы также можете настроить виджет обратного звонка от Zadarma или онлайн-чат от Jivosite на Платформе. Инструкции расположены по ссылкам ниже:
Настраиваем интеграцию с сервисом Zadarma
Подключаем плагин JivoSite

Нашли ответ на свой вопрос?