Как сделать плавный скролл к открытой вкладке аккордеона на Tilda?

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

Модификация работает с включенным Autoscale в блоках

Модификация работает только со стандартными блоками

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Id блока гармошки

Тип блока гармошки

Список якорей

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<script> document.addEventListener('DOMContentLoaded', function() { function TiCodeTXN16(selector, index) { const TiTXN16elements = document.querySelectorAll(selector); if (TiTXN16elements.length > index) { const TCDbutton = TiTXN16elements[index].querySelector('.t585__trigger-button'); if (TCDbutton) { TCDbutton.click(); setTimeout(function() { TiTXN16elements[index].scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 300); } } } const TCDIndexMap = '#ti0 0, #ti1 1'; const TCDIndexObj = TCDIndexMap.split(', ').reduce((acc, pair) => { const [link, index] = pair.split(' '); acc[link] = parseInt(index); return acc; }, {}); document.querySelectorAll('a[href^="#"]').forEach(function(link) { link.addEventListener('click', function(event) { event.preventDefault(); const TiCtarget = event.currentTarget.getAttribute('href'); if (TCDIndexObj[TiCtarget] !== undefined) { TiCodeTXN16('#rec493782123 .t-col', TCDIndexObj[TiCtarget]); } }); }); }); </script> <script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>

КОПИРОВАТЬ КОД

1. Создаем блок гармошки TX16N или TX16N2 и наполняем его контентом. Копируем id блока и указываем в генераторе в поле "Id блока гармошки". В настройках блока включаем опцию "Перемещаться к раскрытой карточке";

2. Выбираем в генераторе тип блока гармошки который создали TX16N или TX16N2;

3. Указываем в генераторе в поле "Список якорей" якоря и номер вкладки гармошки к которой нужно скролить в формате #ti1 0, #ti2 1, ti2 3
первая часть это якорь #ti1, вторая часть 0 - это номер вкладки гармошки к которой скролим.
Важно! Нумерация вкладок начинается с 0.

Например у вас гармошка на 5 вкладок и нужно чтобы первый якорь скролил к первой вкладке, второй якорь ко второй, а третий якорь к пятой. Тогда в генераторе указываем вот так: #ti1 0, #ti2 1, #ti3 4. Названия якорей можете указывать любые, не обязательно их нумеровать. Можно указывать например вот так #test 0, #about 1, #more 4

4. Указываем ссылки якорей любым элементам при клике на которые должен быть скролл. Можно указывать ссылки как в стандартных блоках так и любым элементам в Zero Block;

5. Копируем готовый код и вставляем в HTML блок T123.