URL скопирован в буфер обмена!
Как сделать якорную ссылку в Zero Block на Tilda?
С помощью этой модификации можно создавать собственные якорные ссылки в длинных Zero Block и плавно скроллить к ним. Якорную ссылку можно назначить на любой элемент в Zero Block. Дополнительно можно настроить смещение при скролле.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Модификация обновлена. В модификацию добавлен плавный скролл. Есть возможность настроить смещение при скролле, а также записывать якорь в хеш. Улучшена поддержка австокейла, а также более простой формат установки модификации.
Список ссылок якорей
Смещение при скролле (десктоп)
Смещение при скролле (мобилка)
Хеш якоря
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD006--><script>
const TCDlincsAnchor = "#about, #faq";
const TCDlinksArray = TCDlincsAnchor.split(", ").map(link => link.trim());
function TICodeScrollHashUpdate(enabled) {
function scrollToAnchor(anchor) {
const target = document.querySelector(`.${anchor}`);
if (target) {
const offset = window.innerWidth <= 640 ? 50 : 100;
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({
top: targetPosition,
behavior: "smooth"
});
}
}
if (enabled) {
TCDlinksArray.forEach(function (href) {
const link = document.querySelector(`a[href="${href}"]`);
if (link) {
link.addEventListener("click", function (event) {
event.preventDefault();
const targetAnchor = href.substring(1);
scrollToAnchor(targetAnchor);
history.pushState(null, "", href);
});
}
});
document.addEventListener("DOMContentLoaded", function () {
const currentHash = window.location.hash.substring(1);
if (currentHash) {
setTimeout(function() {
scrollToAnchor(currentHash);
}, 500);
}
});
} else {
TCDlinksArray.forEach(function (href) {
const link = document.querySelector(`a[href="${href}"]`);
if (link) {
link.addEventListener("click", function (event) {
event.preventDefault();
const targetAnchor = href.substring(1);
scrollToAnchor(targetAnchor);
});
}
});
}
}
TICodeScrollHashUpdate(false);
</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(плавный скролл) можно не использовать.
