Как сделать якорную ссылку на блок на другой странице

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

Смотрите видео:

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

Пошаговая инструкция

Шаг 1: Настройте переход по якорю

В редакторе перейдите на страницу «Контакты» и выберите меню на холсте или в слоях. Затем перейдите на вкладку Настройки на правой панели и откройте настройки меню, кликнув на иконку шестеренки.

Перейдите в настройки пункта «Контакты».

В поле Действие вместо перехода на страницу выберите тип Переход по якорю.

Нажмите кнопку Выбрать элемент и выберите нужный блок — в нашем примере это нижняя секция Footer.

Опубликуйте страницу «Контакты», нажав кнопку Опубликовать.

Откройте опубликованную страницу в браузере и проверьте работу — при клике на пункте меню «Контакты» происходит переход к футеру.

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

Шаг 2: Скопируйте ссылку с якорем

В адресной строке браузера скопируйте URL, который получился после перехода по якорю. Он содержит адрес страницы, а в конце — символ «#», обозначающий якорь, и его ID.

Шаг 3: Настройте переход по ссылке

В редакторе откройте настройки пункта меню «Контакты» и настройте параметры:

Действие → Переход по ссылке

Переход по ссылке → Вставьте скопированный URL

Опубликуйте страницу и проверьте работу. Перейдите на главную страницу и кликните по пункту «Контакты» — произойдет переход на нижний блок страницы «Контакты». То же самое работает и на других страницах.

Если убрать в адресной строке решетку и ID блока и нажать Enter, то произойдет переход к верхней части страницы «Контакты». Если снова нажать на пункт меню, то страница прокрутится до футера, а в адресной строке добавится ID блока.

В нашем примере меню сделано компонентом — поэтому настройка, которую мы сделали для меню на одной странице, применилась для компонентов на всех страницах проекта. Благодаря этому переход по якорной ссылке работает на любой странице.

Резюме

Чтобы настроить переход к нужному блоку на другой странице:

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

Откройте страницу в браузере, перейдите по ссылке и скопируйте URL из адресной строки.

Замените тип перехода в меню на Переход по ссылке и вставьте скопированный адрес.

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