Якорные ссылки
Зачем нужны якорные ссылки
Якорные ссылки помогает пользователю перейти из одной части страницы в другую.
Они могут использоваться при настройке действий для:
- пунктов меню, чтобы переходить к разным разделам страницы;
- кнопок;
- текстовых ссылок;
- блок-ссылок.
Видео: Как настроить якорную ссылку
https://vk.com/video-219751701_456239181
Как добавить якорные ссылки для пунктов меню
1. Выберите меню и откройте Настройки в правой панели.
2. Откройте настройки меню, кликнув на иконку слева от его названия.
3. Откройте настройки действий для пункта меню.
4. Выберите Действие — «Переход по якорю».
5. Нажмите кнопку Выбрать элемент, чтобы настроить, куда будет происходить переход при клике на пункт меню.
Далее выберите нужный элемент на холсте или в слоях и подтвердите выбор.
Учитывайте, что страница будет прокручиваться до верхнего края выбранного элемента. Поэтому в качестве цели лучше выбирать секцию, а не контент внутри нее. Также можно добавить секции внутренний отступ сверху, если он не был настроен ранее. Тогда после прокрутки у вас останется свободное пространство вверху страницы.
6. Добавьте плавность перехода. Для этого введите значение скорости прокрутки Scroll speed в миллисекундах — например, 400ms.
Этот параметр будет одинаковым для якорных ссылок во всех пунктах меню.
7. Настройте якорные ссылки для остальных пунктов меню, повторив шаги 2–4.
8. Опубликуйте страницу и проверьте, как работает переход по каждому пункту меню.
Проверить работу якорных ссылок можно только на опубликованном проекте. В режиме предварительного просмотра этот функционал работать не будет.
Как добавить якорную ссылку для кнопки
1. Выберите кнопку, перейдите в Настройки и добавьте Действие, нажав на «+».
2. В Триггере действия оставьте опцию «При клике», а в Действии — выберите «Переход по якорю».
3. Выберите элемент, к которому будет происходить переход по кнопке. Например, секцию с контактной формой.
4. Добавьте плавность перехода, настроив Скорость прокрутки.
5. Опубликуйте проект и проверьте работу.
Якорные ссылки для текстовой ссылки и блок-ссылки настраиваются так же, как для кнопки. Для каждого элемента можно выбрать свою скорость прокрутки.