Якорь мне в блок! – как создать якорную ссылку на Tilda

В этой статье разберём, что такое якорные ссылки, как правильно настраивать их на Tilda, с какими ошибками можно столкнуться при работе с якорями, а также поделюсь полезными лайфхаками, которые помогут использовать их максимально эффективно. Статья в первую очередь будет полезна новичкам, но и опытные верстальщики смогут узнать что-то новое для себя.

Содержание:

• Что такое якорная ссылка?
• Как сделать якорную ссылку на Tilda?
• Как сделать якорную ссылку внутри длинного Zero Block?
• Лайфхаки при создании якорей

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

Якорная ссылка всегда состоит с двух частей: знак # и названия якоря.
Знак # указывает браузеру что ссылка относится к этой же странице. Пример якорной ссылки: #contact

Присвоить якорную ссылку можно любой кнопке или тексту в стандартном блоке и любому элементу внутри Zero Block. Рассмотрим основные способы настройки якорей.

Это самый простой способ — достаточно скопировать id нужного блока и указать его в ссылке, например #rec123456789. Данный способ не рекомендую использовать так как он вызывает много проблем в дальнейшем, особенно при масштабировании сайта. При копировании блоков или страниц, а иногда при передаче проекта заказчику, меняются id блоков и якоря перестанут работать.

Самый распространённый и гибкий споcоб настройки якоря. Добавляем блок T173 и присваиваем ему понятный идентификатор (например contact). В ссылке пишем такой же идентификатор, только не забываем указываем #. Преимуществ у такого способов множество: якорь можно легко перемещать между блоками или копировать на другие страницы, а самое главное что якорь никогда не слетит и у него будет понятное название.

В 2025 году в Tilda появилась возможность добавить якорь прямо через настройки любого блока. По сути это аналог функционала блока Т173. Для этого открываем настройки блока, нажимаем «Якорная ссылка» и указываем имя — например, contact. В ссылке указываем #contact. Этот способ удобен, но менее гибкий: якорь всегда ведёт к верхней границе блока. Если структура страницы меняется (например, нужно переставить блоки с кейсами), придётся переносить якорь вручную. Поэтому способ лучше использовать на небольших сайтах. Для гибкой настройки по-прежнему лучше подходит блок T173.

Резюмируем: самый надёжный способ создать якорную ссылку — использовать блок T173. Не забываем также добавлять блок T178. Он обеспечит плавный скролл к якорю и поможет пользователю не потеряться на странице. Дополнительно в настройках T178 можно задать смещение при скролле. Это важно, если у вас есть фиксированное меню. Например, при высоте меню 100 пикселей указываем смещение на 100, чтобы меню не перекрывало заголовок блока при скролле.

Иногда нужно сделать якорь к конкретному месту внутри длинного Zero Block. В этом случае поможет модификация TCD006 Якорная ссылка в Zero Block. Достаточно указать список нужных якорей в генераторе кода и присвоить классы элементам внутри зеро блок, к которым нужно скроллить. Модификация уже включает плавную прокрутку и дополнительно позволяет задать смещение для десктопа и мобилок (можно не использовать блок T178).

При работе над коммерческими проектами мне не раз попадались ситуации, когда заказчику нужно было сделать ссылку на внешний сайт и сразу прокрутить к нужному фрагменту текста. Естественно просить админа стороннего сайта добавить якорь на свою страницу чтобы я потом ссылался на него не вариант)

Тут на помощь приходит Text Fragment API. С его помощью можно прокрутить страницу к нужной фразе, даже если на ней нет якоря. Достаточно использовать ссылку формата: https://site.com#:~:text=текст%20который%20ищем

Важно: пробелы заменяем на %20

При переходе по такой ссылке браузер загрузит страницу и автоматически прокрутит к указанной фразе, выделив её цветом. Это не полноценный якорь, но отличная альтернатива, когда других вариантов нет. Пример такой ссылки

Ограничений у такого способа конечно много и о них ниже:

• Не работает в Safari и Firefox.
• Может не сработать, если текст разбит на части. Например по тегам (<span>, <b> и т. п.).
• Браузер ищет первое совпадение, даже если есть другие фрагменты с тем же текстом.
• Некоторые сайты отключают поддержку Text Fragment API через Content-Security-Policy.

Если же сайт сделан на Tilda, всё проще: достаточно узнать ID нужного блока и указать ссылку такого вида: https://site.com/#rec00000000

Если перед вами стоит задача указать якорь, который не просто прокрутит страницу, а ещё и откроет нужную вкладку в аккордеоне Тильда, можно использовать модификацию TCD095 Плавный скролл к открытой вкладке аккордеона
С помощью этой модификации можно настроить якоря, при клике на которые будут открываться нужные вкладки в стандартных аккордеонах TX16N и TX16N2, а также осуществляться плавный скролл к ним.