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

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

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

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

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

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

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

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

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

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

войти

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

регистрация

оплатить

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

<script> (function () { const TCDIndexMap = "#ti0 0, #ti1 1"; const TCDIndexObj = TCDIndexMap.split(',').reduce((acc, pair) => { const [key, index] = pair.trim().split(' '); acc[key] = parseInt(index); return acc; }, {}); const TCDaccord = '#rec493782123 .t-col'; function openAccordion(hash) { const idx = TCDIndexObj[hash]; if (typeof idx !== 'number') return; const Tildablockstc = document.querySelectorAll(TCDaccord); if (Tildablockstc.length <= idx) return; const TCDanchor = Tildablockstc[idx].querySelector('.t585__trigger-button'); if (!TCDanchor) return; TCDanchor.click(); setTimeout(() => { Tildablockstc[idx].scrollIntoView({ behavior: "smooth", block: "start" }); }, 50); } document.addEventListener('DOMContentLoaded', function () { const hash = window.location.hash; if (TCDIndexObj[hash] !== undefined) { setTimeout(() => openAccordion(hash), 400); } }); window.addEventListener('hashchange', function () { openAccordion(window.location.hash); }); document.addEventListener('click', function (e) { const TCDlink = e.target.closest('a[href^="#"]'); if (!TCDlink) return; const hash = TCDlink.getAttribute('href'); if (TCDIndexObj[hash] === undefined) return; e.preventDefault(); openAccordion(hash); history.replaceState(null, "", hash); }); })(); </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.