Menu

Anchor link not working? How to find and fix broken #section links
📰

Anchor link not working? How to find and fix broken #section links

DEV Community: html·linkbruno.com·2 days ago
#u7rloN8Z
#devto2#devto#dev#install#section
Reading 0:00
15s threshold

You click a link like /docs/setup#install and the page loads, but it stays at the top. No error, no 404. The link is broken in a way most tools never notice, because the page itself returns 200 OK.

These broken anchor links are common in documentation, long guides and tables of contents. Here's why they happen, how to debug one, and how to find every broken anchor on a site.

How anchor links work

The part after # is called a fragment. Your browser never sends it to the server. It loads the page, then looks for an element whose id matches the fragment and scrolls to it:

<a href= "/docs/setup#install" > Install </a>

<!-- on /docs/setup --> <h2 id= "install" > Install </h2>

Enter fullscreen mode

Exit fullscreen mode

If no element has id="install" , the browser simply doesn't scroll. That's the whole failure, and it's silent.

Why anchor links break

The heading was renamed. Many CMSs and static site generators create ids from heading text.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.