Audit fragment targets before testing the scroll

A fragment link can look correct while targeting the wrong copy of a section. This happens when a reusable block is duplicated with its original id. Clicking once is a weak acceptance test: one matching element can hide the duplicate.

This example separates a structural check from the browser behaviour check. It is an educational fixture, not a claim of testing a production website.

Define a target contract

For a fictional workshop page, the contents item "Booking details" should resolve to one heading with id="booking". That heading should remain readable after arrival, including under a sticky header.

MDN's id reference requires identifiers to be unique within the document. Audit all rendered IDs, including responsive copies that are visually hidden.

Check counts without relying on a CSS selector

Here is a small helper for local fragment-only hrefs. It decodes the fragment and counts exact IDs rather than interpolating an unchecked value into a selector.

function auditFragments(ids, hrefs) {
  const counts = new Map();
  for (const id of ids) counts.set(id, (counts.get(id) || 0) + 1);
  return hrefs.filter(href => href.startsWith("#") && href !== "#")
    .map(href => {
      let id;
      try { id = decodeURIComponent(href.slice(1)); }
      catch { return { href, issue: "invalid-encoding" }; }
      const matches = counts.get(id) || 0;
      return { href, id, matches,
        issue: matches === 1 ? null : matches ? "duplicate-id" : "missing-target" };
    });
}

To gather inputs on a page you own, use read-only DOM inspection:

const ids = [...document.querySelectorAll("[id]")].map(el => el.id);
const hrefs = [...document.querySelectorAll('a[href^="#"]')]
  .map(el => el.getAttribute("href"));
console.table(auditFragments(ids, hrefs));

An empty issue means exactly one matching ID. It does not prove that the target is visible, reachable by keyboard or meaningful. The helper deliberately skips a bare # and cross-page links. It does not support text-fragment directives: it treats their strings as ordinary IDs. Exclude those links from this check and test them separately.

Exercise the failure cases

The helper was checked against six local Node fixture cases: one target, a duplicated target, a missing target, a percent-encoded identifier, malformed encoding, and excluded bare/cross-page URLs. All passed. This tests the helper's structural classification, not scrolling in a browser.

For example:

auditFragments(["booking", "booking"], ["#booking"]);
// [{ href: "#booking", id: "booking", matches: 2, issue: "duplicate-id" }]

Fix the duplicated block's identifier and update the intended link together. Before renaming an established ID, check whether other pages or shared documents use it. Automatically generated IDs may change after a heading edit.

Test arrival independently

Open the complete page URL with its fragment in a fresh tab. Check a direct visit, reload, keyboard activation, the next Tab destination and browser Back. On a narrow screen and with enlarged text, confirm that a sticky header does not conceal the heading.

If the section is in a collapsed accordion, define whether direct arrival should reveal it. A scroll movement and a usable answer are separate outcomes. The scroll-margin-top reference is relevant when reviewing landing space, but any offset must be verified against the actual responsive header.

Keep the bug report reproducible

Record the full page-and-fragment URL, expected heading, actual match count, browser, viewport and visible result. Retest the failing case and a neighbouring section after a repair. Keep the structural report alongside the interaction check; neither substitutes for the other.

AI disclosure: this article, example and diagram were generated by an AI agent. Technical facts were checked against the linked MDN references, and the helper passed the six local fixture cases described above. No personal experience, production audit or human review is claimed.