Member Avatar for Syakoban

Hi,

I haven't had the need to use an anchor tag like <a href="wahtever.html#here">blah blah</a> and <a name="#here"></a> in years. Now that I do, I'm using it on a page with layers too. I noticed that if I name the layer the same as the anchor (like <div id="here"), a link from another page will jump to that layer location. But...

Is this reliable? Does it work in all major browsers? Is this valid code or a fluke thing?

Thanks.

  • 5 Contributors
  • 9 Replies
  • 198 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: yes — that "jump to" behavior is how fragments are defined and is reliable in modern browsers. The HTML spec resolves a URL fragment by looking for an element with a matching id (and only for legacy compatibility will it look for an <a name="...">), then the UA scrolls that element into view and updates the document target. This is the standardized behavior, so what you observed (naming the layer and linking to page#fragment) is expected. (html.spec.whatwg.org)

Practical caveats and fixes you’ll find useful: the browser runs the "scroll an element into view" steps from the CSSOM View spec, so the scroll will attempt to bring the target into the visible area (including scrolling any scrollable ancestor). If a fixed header covers the target, use CSS offsets rather than hacks — scroll-padding-top or scroll-margin-top (applied to targets or the scroll container) are the modern solutions. Smooth scrolling and :target styling also work well together. Example pattern you can drop into a stylesheet:

html { scroll-behavior: smooth; scroll-padding-top: 64px; }
:target { scroll-margin-top: 64px; outline: none; }

The scrolling algorithm and the CSS properties above are specified and broadly supported. (drafts.csswg.org)

Troubleshooting checklist (short, actionable): 1) confirm the id is present and unique (no ASCII whitespace) and not display:none when the page loads; 2) if the page is rendered client-side (SPA), wait until the element exists before trying to navigate or handle location.hash and scroll/focus programmatically; 3) for accessibility, give the target a temporary tabindex="-1" and call focus() after the jump so screen-readers announce it; 4) if you need to select the element by an ID that contains special chars, use CSS.escape() before building a selector. These cover the common failures you and others in the thread saw. (html.spec.whatwg.org)

Notes tied to the thread: was right that it behaves like the usual "jump" links; was pointing toward the deprecation story (avoid adding new name anchors — use id); and ’s layer observation fits the above rules — just verify visibility, uniqueness, and timing when the link is followed.

Recommended Answers

All 9 Replies

Member Avatar for macneato

Download A-Prompt Program Version 1.0

Member Avatar for autocrat

Try looking up Anchor and Target :)

By using the ID attribute, you have basically made a "jump to link"....

usually, in the anchor, you'd have to have something like... href="blah.html/#thisonegere"... and in the page markup have an id for "thisonehere".
The link is jumping to that point!

Member Avatar for Syakoban

you have basically made a "jump to link"....

What is the real difference? Will the "jump to link" work in the major browsers?

Thanks.

Member Avatar for autocrat

arg... go look it up :D

It should work i most modern browsers and the majority of text-readers.
go download some other browsers and test it ;)

It's not new, nor is it phenominal... it's the same as the "Back to top" stuff on a lot of sites...
Look it up, read the usage andresults, then decide if you want to use it.

In my opinion... if you link to a page, it should start at the top.
If you link to an item on the page, you should go to that item (the jump link)... possibly with an option to go to the main page without jumping to the item.

But it boils down to choice.

Member Avatar for MidiMagic

They are talking about deprecating the name attribute in anchor tags.

Member Avatar for Syakoban

Then what will replace it?

Member Avatar for MidiMagic

I don't know.

They never came up with a good replacement for the center tag, or starting an ordered list at a number other than 1. The elitists making the decisions don't consider the fact that some people have uses for html other than books and newspapers.

Some possibilities include the id attribute, and a relative version of the href attribute.

Member Avatar for Lun

Hi,

I haven't had the need to use an anchor tag like <a href="wahtever.html#here">blah blah</a> and <a name="#here"></a> in years. Now that I do, I'm using it on a page with layers too. I noticed that if I name the layer the same as the anchor (like <div id="here"), a link from another page will jump to that layer location. But...

Is this reliable? Does it work in all major browsers? Is this valid code or a fluke thing?

Thanks.

Thank You!!!!!

Member Avatar for MidiMagic

The id attribute is replacing the name attribute.

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.