Adding Page Anchors (links on a site that go to other places on site)

.:.wolvie.:. 0 142 Views

Page Anchors... Simple enough...two easy little codes to plug in and your ready to go! Come learn how!

To make a page anchor, go to the page 
you want to put it on, decide where you 
want it, THE LINK YOU CLICK ON TO JUMP
 TO OTHER PARTS OF THE PAGE,, center, 
left, etc., and plug in this code:

<a href="#codeword">whatever words you want to use</A>

Then after you've done that, decide where 
you want to make the page go to 
automaticly when you click on it. Say i
 wanted one to go to the top of a page,
 then I'd put in this next code BEFORE all 
of my text on the whole page, that way, 
it goes to the TOP and nothing else ;)

<A name="codeword"></A>

After that you may want to test it out and
 see how it works!

Dani AI

Generated

Good, simple intro from — the classic named-anchor idea is covered, but a few modern, practical updates stop common problems (hidden targets under fixed headers, poor keyboard/screen‑reader behaviour, and obsolete attributes).

Use the id attribute on the actual target element instead of empty legacy anchors. Any element can be targeted; keeping IDs on headings keeps markup semantic and easier to maintain:

<h2 id="features">Features</h2>

Links reference that fragment with #features. The name attribute on <a> is considered obsolete in modern HTML; see MDN: a element for details.

Smooth scrolling and fixed-header offsets prevent awkward jumps. A small CSS approach works in current browsers:

html { scroll-behavior: smooth; }
h2 { scroll-margin-top: 72px; } /* leave space for a fixed nav */

Accessibility and focus handling matter for keyboard and screen‑reader users. After programmatic jumps, set focus to the target so assistive tech announces context:

const t = document.getElementById('features');
if (t) { t.tabIndex = -1; t.focus(); }

Keep IDs unique, short, and without spaces or odd punctuation to avoid CSS/URL escaping headaches. Test fragments cross-page (URL#id) and on mobile. For more info on smooth scrolling and offsets, see MDN: scroll-behavior and MDN: scroll-margin-top.

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.

Edit Preview