Блог Perkova&Perkova

Якорное оглавление длинной страницы на Tilda

Оглавление длинной страницы помогает перейти к нужному разделу: посетителю не приходится пролистывать весь материал о ремонте или обучении. В Tilda такой маршрут собирается из обычных ссылок и якорей. Настройка полезна, когда разделы действительно самостоятельны и их названия позволяют выбрать ответ.

Составьте короткий список разделов

В учебном примере страница вымышленного курса содержит программу, формат занятий, требования к ученику и вопросы. Оглавление повторяет эти четыре задачи. Не включайте каждый абзац: получится второй длинный текст вместо навигации. Название «Что потребуется для занятий» понятнее, чем «Раздел 3».

Поставьте оглавление после вводной части, чтобы сначала было ясно, чему посвящён материал. Заголовки разделов должны совпадать по смыслу с пунктами списка. Если раздел перенесли или удалили, обновляют и соответствующий переход.

Создайте якорь и ссылку

  1. Перед программой добавьте блок T173 из категории «Другое».
  2. В его «Контенте» задайте имя якоря, например course-program. Для остальных разделов используйте разные понятные имена.
  3. В тексте оглавления выделите название программы и укажите ссылку #course-program. Такой же адрес можно задать кнопке или пункту меню.
  4. Сохраните и опубликуйте страницу. Блок якоря не должен создавать видимую подпись «course-program» в материале.

Альтернатива — имя якоря в настройках самого целевого блока. Она удобна, когда начало раздела совпадает с началом блока. Не создавайте одновременно два одинаковых якоря разными способами. В официальной инструкции описаны оба варианта и переход на другую страницу: например, /course#course-program.

Ссылка по номеру блока тоже возможна, но при копировании страницы номера меняются. Именованный маршрут легче поддерживать в оглавлении и в других материалах. Для учебного проекта не используйте системные имена price и order.

Проверьте результат как читатель

Откройте опубликованный адрес без редактора. Нажмите каждый пункт, затем проверьте прямую ссылку с якорем в новой вкладке. Текст нужного заголовка должен оставаться видимым. Если сверху закреплено меню, отдельно проверьте, не накрыло ли оно начало раздела.

На телефоне посмотрите, удобно ли нажимать соседние ссылки и не превращается ли список в плотную строку. Проверьте управление клавиатурой: название ссылки видно при фокусе, переход работает, порядок соответствует порядку разделов. Плавную прокрутку можно добавить отдельным T178; нескольких таких модификаторов на одной странице быть не должно.

Если переход работает неправильно

  • Страница не прокручивается: проверьте символ # в ссылке и совпадение имени.
  • Открывается другой раздел: найдите повторяющиеся якоря.
  • После копирования страницы переход сломан: замените ссылки по старым номерам блоков.
  • Оглавление отправляет на технический домен: исправьте адрес другой страницы на публичный.

Продолжите настройку с материалами про перекрытие заголовка фиксированным меню и иерархию заголовков. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.

Практика Tilda