SEO-оглавление с прогрессом в Tilda
готовый код.

<aside class="tselno-toc" data-toc>
  <div class="tselno-toc__top"><strong>Содержание</strong><span data-toc-percent>0%</span></div>
  <div class="tselno-toc__progress"><i data-toc-progress></i></div>
  <nav aria-label="Содержание страницы" data-toc-list></nav>
</aside>

<style>
.tselno-toc { --toc-text: #10110f; --toc-accent: #d9ff43; padding: 22px; border: 1px solid var(--toc-text); color: var(--toc-text); font-family: Arial, sans-serif; }
.tselno-toc__top { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; text-transform: uppercase; }
.tselno-toc__progress { height: 4px; margin: 14px 0 18px; overflow: hidden; background: rgba(16,17,15,.14); }
.tselno-toc__progress i { width: 0; height: 100%; display: block; background: var(--toc-accent); }
.tselno-toc nav { display: grid; }
.tselno-toc a { padding: 10px 0; border-bottom: 1px solid rgba(16,17,15,.16); color: inherit !important; text-decoration: none !important; font-size: 15px; line-height: 1.35; }
.tselno-toc a[data-level="3"] { padding-left: 22px; color: rgba(16,17,15,.62) !important; }
.tselno-toc a.is-active { padding-left: 12px; background: var(--toc-accent); }
.tselno-toc a[data-level="3"].is-active { padding-left: 34px; }
</style>

<script>
(function () {
  var root = document.querySelector('[data-toc]');
  if (!root) return;
  var scope = document.querySelector('#allrecords') || document.body;
  var headings = Array.from(scope.querySelectorAll('h2, h3')).filter(function (heading) { return !root.contains(heading); });
  var list = root.querySelector('[data-toc-list]');
  var bar = root.querySelector('[data-toc-progress]');
  var percent = root.querySelector('[data-toc-percent]');
  if (!headings.length) { root.hidden = true; return; }

  headings.forEach(function (heading, index) {
    if (!heading.id) heading.id = 'section-' + (index + 1);
    var link = document.createElement('a');
    link.href = '#' + heading.id;
    link.dataset.level = heading.tagName === 'H3' ? '3' : '2';
    link.textContent = heading.textContent.trim();
    list.appendChild(link);
  });

  var links = Array.from(list.querySelectorAll('a'));
  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) return;
      links.forEach(function (link) { link.classList.toggle('is-active', link.hash === '#' + entry.target.id); });
    });
  }, { rootMargin: '-20% 0px -65% 0px' });
  headings.forEach(function (heading) { observer.observe(heading); });

  function updateProgress() {
    var height = document.documentElement.scrollHeight - window.innerHeight;
    var value = height > 0 ? Math.min(100, Math.max(0, window.scrollY / height * 100)) : 0;
    bar.style.width = value + '%';
    percent.textContent = Math.round(value) + '%';
  }
  updateProgress();
  window.addEventListener('scroll', updateProgress, { passive: true });
})();
</script>