scrollspy

ArticleListItem.html

  <h2
    class="mb-3 scroll-mt-24"
    id={`art-${number}`}
    x-intersect:enter="$store.scrollSpy.activeId = 'art-'+number"
  >
    <span class="mb-1 block font-mono text-sm text-slate-600"
      >Artikel {number}</span
    >
    <a class="block text-xl font-semibold hover:underline" href={url}>{name}</a>
  </h2>

OnThisPage.html

<aside
  x-data
  x-init="$store.scrollSpy.activeId = window.location.hash.slice(1) || ''"
  x-effect="if ($store.scrollSpy.activeId) { const link = document.querySelector('aside[x-data] nav a[href=\'#' + $store.scrollSpy.activeId + '\']'); link?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' }) }"
  class="sticky top-24 h-fit"
>
  <p class="text-lg font-semibold mb-2">{title}</p>
  <nav class="flex flex-col gap-y-3 h-[calc(100vh-150px)] overflow-y-auto">
    {
      articles.map((article) => (
        <a
          href={`#art-${article.number}`}
          class="text-sm transition-colors duration-150 text-slate-700 hover:text-primary"
          x-on:click="$store.scrollSpy.activeId = $event.target.getAttribute('href').slice(1)"
          :class="text-primary font-semibold border-l-2 border-primary pl-2': $store.scrollSpy.activeId === 'art-' + article.number }"
          :aria-current="$store.scrollSpy.activeId === 'art-' + article.number ? 'true' : undefined"
        >
          Art.{article.number} {article.name.de}
        </a>
      ))
    }
  </nav>
</aside>