Anchor Navigation

Inline Jump Links

A row of links to sections further down the same scroll container. Works with zero JavaScript.

<nav class="flex flex-wrap gap-4">
  <a href="#overview">Overview</a>
  <a href="#pricing">Pricing</a>
  <a href="#faq">FAQ</a>
</nav>

<section id="overview">...</section>
<section id="pricing">...</section>
<section id="faq">...</section>

Fixed Side Dot Nav

A dot per section, filled in when that section is active. Click a dot to jump; scroll to see it update on its own.

<nav class="fixed right-6 top-1/2 -translate-y-1/2 flex flex-col gap-3">
  <a href="#a" class="dot" :class="active === 'a' && 'dot--active'"></a>
  <a href="#b" class="dot" :class="active === 'b' && 'dot--active'"></a>
</nav>
<!-- active is set by a scroll listener comparing scrollTop to each
     section's offsetTop, same logic as the Scroll Spy example below -->

Sticky Top Anchor Bar

sticky top-0 keeps the link row pinned while its section content scrolls underneath.

<nav class="sticky top-0 flex gap-4 px-4 py-3 bg-white border-b">
  <a href="#specs">Specs</a>
  <a href="#reviews">Reviews</a>
  <a href="#shipping">Shipping</a>
</nav>

Scroll Spy

The link matching the section currently in view is highlighted automatically as you scroll.

<div x-data="{ active: 'x' }" @scroll="
       const boxes = $el.querySelectorAll('[data-spy]');
       let current = active;
       boxes.forEach(b => { if ($el.scrollTop + 40 >= b.offsetTop) current = b.dataset.spy; });
       active = current;
     ">
  <a href="#x" :class="active === 'x' && 'is-active'">Intro</a>
  <div id="x" data-spy="x">...</div>
</div>

Smooth Scroll

scroll-smooth on the scroll container eases the jump instead of snapping instantly.

<div class="overflow-y-auto scroll-smooth">
  <a href="#bottom">Bottom</a>
  ...
  <div id="bottom">...</div>
</div>

Edge Cases

An empty section list and a long label both need to degrade gracefully rather than breaking the bar's layout.