When using a sticky header, scrollIntoView({ block: 'start' }) can cause target elements to be hidden beneath the header. Instead of relying on manual scroll offsets or layout hacks, the correct solution is to use CSS scroll offset utilities like scroll-margin-top. This approach keeps the layout intact, works naturally with sticky positioning, and results in a cleaner, more accessible scrolling experience.

Best fix(modern and clean):

.scroll-target {
  scroll-margin-top: 64px; /* header height */
}

Tailwind version (very common)

<!-- 16 = your header's height -->
<h2 class="scroll-mt-16">...</h2>