Элементы и виджеты

Якорные ссылки

8min

Видео-урок по настройке якорных ссылок:

Видео на YouTube
VK Видео


Зачем нужны якорные ссылки

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

Они могут использоваться при настройке действий для:

  • пунктов меню, чтобы переходить к разным разделам страницы;
  • кнопок;
  • текстовых ссылок;
  • блок-ссылок.

Как добавить якорные ссылки для пунктов меню

1. Выберите меню и откройте Настройки в правой панели.

Document image


2. Откройте настройки меню, кликнув на иконку слева от его названия. 

Document image


3. Откройте настройки действий для пункта меню.

Document image


3. Выберите Действие — «Переход по якорю».

Document image


4. Нажмите кнопку Выбрать элемент, чтобы настроить, куда будет происходить переход при клике на пункт меню.

Document image


Далее выберите нужный элемент на холсте или в слоях и подтвердите выбор.

Document image


Учитывайте, что страница будет прокручиваться до верхнего края выбранного элемента. Поэтому в качестве цели лучше выбирать секцию, а не контент внутри нее. Также можно добавить секции внутренний отступ сверху, если он не был настроен ранее. Тогда после прокрутки у вас останется свободное пространство вверху страницы.

Document image




5. Добавьте плавность перехода. Для этого введите значение скорости прокрутки Scroll speed в миллисекундах — например, 400ms. 

Document image


Этот параметр будет одинаковым для якорных ссылок во всех пунктах меню.

6. Настройте якорные ссылки для остальных пунктов меню, повторив шаги 2–4.

7. Опубликуйте страницу и проверьте, как работает переход по каждому пункту меню.

Проверить работу якорных ссылок можно только на опубликованном проекте. В режиме предварительного просмотра этот функционал работать не будет.



Как добавить якорную ссылку для кнопки

1. Выберите кнопку, перейдите в Настройки и добавьте Действие, нажав на «+».

Document image


2. В Триггере действия оставьте опцию «При клике», а в Действии — выберите «Переход по якорю».

Document image


3. Выберите элемент, к которому будет происходить переход по кнопке. Например, секцию с контактной формой.

Document image


4. Добавьте плавность перехода, настроив Скорость прокрутки.

Document image


5. Опубликуйте проект и проверьте работу.



Якорные ссылки для текстовой ссылки и блок-ссылки настраиваются так же, как для кнопки. Для каждого элемента можно выбрать свою скорость прокрутки.