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

Содержание

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

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

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

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

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

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

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

кнопок;

текстовых ссылок;

блок-ссылок.

Видео: Как настроить якорную ссылку

YouTube
RuTube
VK Video
Vimeo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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