Templates

In a typical Matrix page builder setup, use the field handle directly as your ID value:

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" id="{{ block.yourFieldHandle }}">

Note: Replace yourFieldHandle with the actual handle of your Matrix Block Anchor field.

Sticky Header

Clicking an anchor link scrolls the page, and if the linked element ends up near the top, it can get hidden under a sticky header.

To stop that happening, set scroll-padding in your CSS:

html,
body {
    scroll-padding-top: 100px; /* set to the height of your header */
}