Member Avatar for Member #900861

Hi,

I'm making a quick site and all the content is on one page, and I'm using a small menu with anchor links to make navigating to a certain part faster for the end user. I have two anchor links that work fine (About Me, My Projects) but the "Contact Me" link jumps to a random part of the "My Projects" section.

A preview of the site is available here :

I have checked the IDs, they correspond, there is no random "contact-me" ID lying around in the "My Projects" section, I've changed the ID, still happens, and this in both Firefox and Chrome. Whats going on ? Any help is appreciated :)

  • 2 Contributors
  • 2 Replies
  • 208 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Member #900861

Dani AI

Generated

Anchors that jump to the wrong place are almost always a DOM/ID or HTML-structure issue rather than a browser bug. In this thread reported two anchors working while the third (“Contact Me”) jumped into the “My Projects” area, and noted the preview wasn’t reachable. Common culprits are duplicate IDs, an id placed on the wrong element, missing/incorrect closing tags that change document flow, a stray <base> tag affecting fragment resolution, JavaScript intercepting the click, or a fixed header hiding the true target.

A short, practical checklist that helps pinpoint the cause:

  • Verify the target element actually exists and is unique:
    document.getElementById('contact-me')
document.querySelectorAll('#contact-me').length
  • Find which link is being clicked and its href:
    document.querySelector('a[href="#contact-me"]')
  • Search the page source (DevTools search) for any other id="contact-me" or name="contact-me". Duplicate ids produce unpredictable jumps.
  • Check for a <base> tag (document.querySelector('base')) or SPA/router code that rewrites hashes.
  • Use DevTools → Sources → Event Listener Breakpoints → Mouse → click to see whether JavaScript prevents default scrolling.

If the page uses a fixed header, the visible position can be off; modern CSS handles this cleanly:

:target {
  scroll-margin-top: 80px; /* adjust to header height */
}

A fallback is placing an invisible anchor element with padding and negative offset so the section appears below the header.

Final notes: ensure id values contain no spaces and are placed on the section/container expected to be the scroll target. When a site is not reachable (404) as observed, debugging is harder—creating a minimal, stand-alone test page with only the offending anchors usually reveals malformed tags or duplicate ids quickly.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

Check the link.. I get a 404 error (page not found).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.