Member Avatar for tokenjoker187

I am trying to use a '#' in the URL to navigate to certain parts of a page and don't even know where to start or what it is called.

I will give you an example:
Most FAQ pages have all the questions as links at the top of the page. When you click the link, it adds a '#' to the URL and navigates the page down to the exact Answer to the Question while staying on the same page.

I cannot figure out if it is done by simple html tricks or maybe javascript?

I want to implement it on my website, but I cannot figure out how it works.

Any ideas or links to tutorials would be extremely helpful. Thanks in advance :-)

  • 3 Contributors
  • 3 Replies
  • 223 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short, practical update that builds on and : the hash (the part of a URL that starts with #) is a client-side fragment identifier — the browser uses it to go to a specific spot in the document (it’s not sent to the server). Modern HTML uses element id values as targets (the old <a name="..."> pattern is obsolete). See MDN: URI fragment and id (global attribute). (developer.mozilla.org)

Quick, practical checklist for FAQ-style pages:

  • Put a unique id on each answer heading (so the table-of-contents links at the top can point to #that-id).

  • Use CSS scroll-behavior for smooth jumps and scroll-margin-top to avoid fixed headers hiding the target. Example:

    html { scroll-behavior: smooth; }
h2 { scroll-margin-top: 4rem; } /* adjust to your fixed nav height */

    These features let the browser settle the view for you or, when you need JS control, call element.scrollIntoView() with options. (developer.mozilla.org)

Accessibility and robustness:

  • For keyboard/screen-reader users, ensure the target can receive focus. Either give the target a tabindex="-1" or set it briefly via script, then call focus() after navigation — this puts the keyboard focus where the visual jump lands. Example (runs on page load):

    window.addEventListener('load', () => {
  if (location.hash) {
    const el = document.getElementById(location.hash.slice(1));
    if (el) { el.tabIndex = -1; el.focus(); }
  }
});

    tabindex behavior and focus rules are covered by MDN. (developer.mozilla.org)

Troubleshooting notes: make IDs unique, avoid whitespace in IDs, check that client-side frameworks render the target before attempting to jump (for SPAs, run the focus/scroll code after render). This combination (IDs, scroll-margin/top or JS, and focus management) gives the same behavior you saw on FAQ pages, but follows current HTML and accessibility best practices.

Recommended Answers

All 3 Replies

Member Avatar for pwinfrey

You need to place anchors where you want the page to navigate to.

If you wanted to navigate to the top of your page, you would define an anchor at the top with a name.

<a name="top"></a>

The link to navigate to the top of the page where your anchor is defined would be:

<a href="#top">Back to top</a>
Member Avatar for tokenjoker187

Thank you so much! Super easy.

Member Avatar for almostbob

further to pwinfrey's reply, answer to the expected follow up question
Yes the link works as expected it moves the page to the anchor defined by name='top' when the page is opened

commented: Read my question fully and gave extra input on the problem. Thank you! +1
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.