Jump to "that spot" within the same page. Mark the target with an id, then jump with href="#...". Great for menus on long pages and "back to top."
An ordinary link jumps to another page. But a link can actually jump to “that spot” within the same page too. On a long single page, “click the menu and it scrolls smoothly to that spot” — that’s the one. You use the usual <a>, plus a new partner: id.
First, mark the target
Put an id="name" marker on the tag at the spot you want to jump to.
<h2 id="profile">Profile</h2>
An id is a name tag that doesn’t repeat within the page. It’s a declaration that says “I’ve given this heading the name profile.” You can choose the name yourself, using ordinary letters.
Jump to that marker
Then all you do is write the marker’s name with a # in the usual link’s href.
<a href="#profile">To profile</a>
What you write
Meaning
id="profile"
The marker for the destination. A name that doesn’t repeat within the page
href="#profile"
The link that jumps to that marker. Put a # at the start
When you click this “To profile,” the screen scrolls to the spot with id="profile". Line them up at the top of the page as a menu, and you’ve got a table of contents that whisks you straight to the spot you clicked.
Click a link at the top and the screen scrolls to that heading’s spot — go ahead and try it.
Making a “back to top” button
The ”▲ Back to top” you often see at the bottom of long pages can be made with the same mechanism. Just mark the tag at the very top of the page, and jump there.
<header id="top"> <h1>My Page</h1></header>...(long body content)...<a href="#top">▲ Back to top</a>
Click #top from the bottom of the page and you’re whisked all the way back to the top.
Summary of this lesson
Put id="name" on the target and href="#name" on the link
The # at the start is the signal for “within the same page” (forget it and it’s treated as another page)
otherpage.html#name jumps partway into another page too
Try it: a menu at the top of the page
Shima’s page has been getting long, so let’s add a “menu” at the very top. Put an id marker on each heading, and jump to it with #.
<nav> <a href="#about">Self-Introduction</a> <a href="#likes">Favorites</a> <a href="#contact">Contact</a></nav><h2 id="about">Self-Introduction</h2><p>Hi! I'm Shima. I love drawing, and on weekends I often go out for ramen.</p><h2 id="likes">Favorites</h2><ul> <li>🎨 Drawing</li> <li>🍜 Ramen</li> <li>🎮 Games</li> <li>🐤 Shima</li></ul>
The <h2> headings stay as they are. What you add this time is the <nav> menu on top, and the id="..." on the headings. Click a menu item, and it whisks you smoothly to that heading’s spot.
The menu on top becomes a shortcut to “that spot” within the page.
This is exactly what the menu at the very top of /goal is.
FAQ
What if an in-page link doesn't jump when I click it?
Check that you didn't forget the
Can I make the jump a smooth scroll?
Yes. In CSS, setting scroll-behavior:smooth on html makes it scroll smoothly to the target instead of switching in an instant.
Can I jump to a spot partway down another page?
Yes. Write it like href="page.html#profile", joining a
