URL скопирован в буфер обмена!
Как сделать якорную ссылку в Zero Block на Tilda?
С помощью этой модификации можно создавать собственные якорные ссылки в длинных Zero Block и плавно скроллить к ним. Якорную ссылку можно назначить на любой элемент в Zero Block. Дополнительно можно настроить смещение при скролле.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Модификация обновлена. В модификацию добавлен плавный скролл. Есть возможность настроить смещение при скролле, а также записывать якорь в хеш. Улучшена поддержка австокейла, а также более простой формат установки модификации.
Список ссылок якорей
Смещение при скролле (десктоп)
Смещение при скролле (мобилка)
Хеш якоря
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD006--><script>
document.addEventListener("DOMContentLoaded", () => {
const TildaHash = false;
const TCDlincsAnchor = "#about, #faq";
const TCDlinksArray = TCDlincsAnchor.split(",").map(link => link.trim());
function createAnchors() {
TCDlinksArray.forEach(href => {
const ElemTiClass = href.substring(1);
const targetEl = document.querySelector(`.${ElemTiClass}`);
if (targetEl && !document.getElementById(`anchor-${ElemTiClass}`)) {
const TCDanchorDiv = document.createElement("div");
TCDanchorDiv.id = `anchor-${ElemTiClass}`;
TCDanchorDiv.className = "tc-anchor";
TCDanchorDiv.setAttribute("data-record-type", "173");
TCDanchorDiv.innerHTML = `<a name="${ElemTiClass}"></a>`;
targetEl.parentNode.insertBefore(TCDanchorDiv, targetEl);
}
});
}
function scrollToAnchorId(anchorId) {
const target = document.getElementById(anchorId);
if (target) {
const offset = window.innerWidth <= 640 ? 50 : 100;
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({ top: targetPosition, behavior: "smooth" });
}
}
function TiCodeinitLinks() {
TCDlinksArray.forEach(href => {
const link = document.querySelector(`a[href="${href}"]`);
if (link) {
link.addEventListener("click", e => {
e.preventDefault();
const ElemTiClass = href.substring(1);
scrollToAnchorId(`anchor-${ElemTiClass}`);
if (TildaHash) {
history.replaceState(null, "", window.location.pathname);
} else {
history.replaceState(null, "", href);
}
});
}
});
}
createAnchors();
TiCodeinitLinks();
const TCDcurrentHash = window.location.hash.substring(1);
if (TCDcurrentHash) {
setTimeout(() => {
scrollToAnchorId(`anchor-${TCDcurrentHash}`);
}, 500);
}
});
</script>
<script> (function updateRecordType() { const scriptElement = document.currentScript; if (scriptElement) { const recordElement = scriptElement.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Указываем ссылки якорей через запятую в поле "Список ссылок якорей". Например: #about, #faq, #up и т. д.
2. В зеро блоках назначим классы элементам к которым скролим. Название классов такое же как указывали в ссылке(без #). Например если указывали ссылку #about, то в зеро блоке назначаем класс about любому элементу к которому нужно скроллить. Например текстовому заголовку "О нас".
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Тоже самое проделываем с остальными ссылками. Назначить класс можно тексту, шейпу, кнопке или картинке. Можно также создать прозрачный шейп и указать класс ему если нужно скроллить в пустое место страницы.
3. При необходимости указываем дополнительные настройки настройки в генераторе:
Смещение при скроле (десктоп/мобилка) - указываем на сколько пикселей нужно смещать скролл. Например если у вас на сайте есть есть фиксированное меню высотой 100 пикселей на пк, то указываем в генератор эту высоту чтобы при скролле меню не перекрывало якорь;
Хеш якорей - если включено, то при клике на кнопки с якорями хеш якоря будет вшиваться в адрес страницы. При обновлении страницы будет автоматически скроллить к этому якорю. Также если вы поделитесь ссылкой формата hpps://вашсайт.com#about то при приходе по такой ссылке будет также срабатывать автоматический скролл к якорю;
4. Копируем код и вставляем в HTML блок T123.
Примечание! В скрипт уже вшит плавный скролл к яорю. Поэтому блок Т178(плавный скролл) можно не использовать.
2. В зеро блоках назначим классы элементам к которым скролим. Название классов такое же как указывали в ссылке(без #). Например если указывали ссылку #about, то в зеро блоке назначаем класс about любому элементу к которому нужно скроллить. Например текстовому заголовку "О нас".
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Тоже самое проделываем с остальными ссылками. Назначить класс можно тексту, шейпу, кнопке или картинке. Можно также создать прозрачный шейп и указать класс ему если нужно скроллить в пустое место страницы.
3. При необходимости указываем дополнительные настройки настройки в генераторе:
Смещение при скроле (десктоп/мобилка) - указываем на сколько пикселей нужно смещать скролл. Например если у вас на сайте есть есть фиксированное меню высотой 100 пикселей на пк, то указываем в генератор эту высоту чтобы при скролле меню не перекрывало якорь;
Хеш якорей - если включено, то при клике на кнопки с якорями хеш якоря будет вшиваться в адрес страницы. При обновлении страницы будет автоматически скроллить к этому якорю. Также если вы поделитесь ссылкой формата hpps://вашсайт.com#about то при приходе по такой ссылке будет также срабатывать автоматический скролл к якорю;
4. Копируем код и вставляем в HTML блок T123.
Примечание! В скрипт уже вшит плавный скролл к яорю. Поэтому блок Т178(плавный скролл) можно не использовать.
