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

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

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

https://vk.com/video-219751701_456239275

VK Видео | YouTube | Rutube

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

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

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

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

Откройте Настройки меню

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

Откройте настройки пункта «Контакты»

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

Выберите Действие → Переход по якорю

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

Выберите элемент → Footer

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

Опубликуйте страницу

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

Кликните на пункт меню «Контакты»

Происходит переход к футеру

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

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

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

Скопируйте URL в адресной строке

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

  1. В редакторе откройте настройки пункта меню «Контакты» и настройте параметры:
  • Действие → Переход по ссылке
  • Переход по ссылке → Вставьте скопированный URL

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

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

Кликните на пункт «Контакты», чтобы проверить работу

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

URL в адресной строке браузера

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

Резюме

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

  1. Временно настройте в меню Переход по якорю внутри страницы и опубликуйте проект.
  2. Откройте страницу в браузере, перейдите по ссылке и скопируйте URL из адресной строки.
  3. Замените тип перехода в меню на Переход по ссылке и вставьте скопированный адрес.
  4. Опубликуйте проект и проверьте результат.