2.5Navigation: anchors, menus & scrolling
The essentials in 30 seconds
- Menus = the main navigation (header); anchors = links to a precise section of the same page.
- Smooth scroll gently animates the arrival at an anchor.
- On mobile, the menu adapts (often a "hamburger" menu) — to test.
Through-line — Nadia links the home page
The joiner's home page is long: presentation, projects, contact. Nadia adds an anchor menu at the top ("Projects", "Contact"): a click smoothly scrolls to the right section. On mobile, she checks that the hamburger menu opens properly and that the anchors work with a finger.
Last step of level 2 — making the long page navigable.
1. Menus, anchors, scrolling
The main menu (in the header) structures the navigation between pages. Anchors (anchor links) lead to a precise section of the same page: you place a "menu anchor" on a section, then a link to it (e.g. #realisations). Smooth scroll makes the arrival gentle rather than a jump.
Nadia places anchors on "Projects" and "Contact", then creates links to them in a small home menu. Links in general (buttons, widgets) can point to pages, anchors, an e-mail or a phone.
2. Mobile navigation
On mobile, navigation often folds into a "hamburger" menu (three-line icon). You must test: does the menu open? do the anchors land in the right place? are the targets big enough for a finger?
Good navigation guides the visitor without losing them: few entries, clear labels, and identical behavior on desktop and mobile.
🔎 Concrete example — Anchor menu for a long page (Nadia's case)
Sections: #presentation, #realisations, #contact
Home menu: "Projects" → #realisations, "Contact" → #contact
Smooth scroll enabled.
Mobile: hamburger menu tested, anchors OK with a finger.
"Call" button → tel:+213...Result: a long page easy to browse.
Lesson: anchors + smooth scroll + mobile test.
Section vocabulary
- Menus
- The site's main navigation (header), between pages.
Simple example: Home · Projects · Contact in the header.
What it is not: confusing the page menu with internal anchors.
Reflex: menu = the site's pages.
- Anchors (anchor links)
- Links that lead to a precise section of the same page.
Simple example: "Projects" → #realisations on the home page.
What it is not: using an anchor to go to another page.
Reflex: anchor = same page; #section.
- Smooth scroll
- The animated, gentle scrolling toward an anchor.
Simple example: click "Contact" → gentle glide to the bottom.
What it is not: an unpleasant abrupt jump.
Reflex: enable smooth scroll on anchors.
- Links
- Buttons and widgets can point to a page, anchor, e-mail or phone.
Simple example: "Call" button → tel:+213…
What it is not: an empty or broken link.
Reflex: choose the target by intent (page/anchor/tel/mail).
- Mobile navigation (hamburger)
- The menu folded into an icon on mobile, to test with a finger.
Simple example: hamburger menu that opens and whose anchors work.
What it is not: a mobile menu that doesn't open or has targets too small.
Reflex: test the mobile menu for real.
In practice — Making a long page navigable
- Place menu anchors on your sections (e.g. #realisations, #contact).
- Create links (menu or buttons) to these anchors.
- Enable smooth scroll.
- Test on mobile: hamburger menu, anchors with a finger, targets big enough.
Ready-to-say script — presenting the navigation to the client (20 s)
"Your home page is a bit long, so I added a small menu: a click on 'Projects' or 'Contact' smoothly scrolls to the right section. On mobile, this menu folds up cleanly and I checked that it works well with a finger."
Show that navigation guides the visitor, especially on mobile.
Copy-paste template — navigation plan
MAIN MENU (pages): _______________
ANCHORS (same page): #________ #________ #________
LINKS TO ANCHORS (menu/buttons): _______________
SMOOTH SCROLL: enabled / disabled
PHONE BUTTON (tel:) / E-MAIL (mailto:): _______________
MOBILE TEST (hamburger + anchors with a finger): done / to doLong page (one-page)
Anchor menu essential to navigate between sections.
Multi-page site
Page menu in the header; anchors as a complement on long pages.
Direct contact
tel:/mailto: buttons to reach the tradesperson in one tap, especially mobile.
Mobile
Clear hamburger menu, few entries, wide targets for a finger.
✓ Best practices
- Use anchors for long pages.
- Enable smooth scroll.
- Test the menu and anchors on mobile.
✗ Common pitfalls
- Confusing anchor (same page) and page link.
- Forgetting to test the mobile menu.
- Vague or too-many menu labels.
Key takeaways
- Menus = pages; anchors = sections of the same page.
- Smooth scroll for a gentle arrival.
- Links to page, anchor, phone, e-mail.
- Test mobile navigation (hamburger).
48h challenge — apply tomorrow
On a long page, place 2 anchors, create links to them, enable smooth scroll, then test the hamburger menu and the anchors on a real phone. 20 minutes.
- I create anchors and internal links.
- I enable smooth scroll.
- I test the navigation on mobile.
Frequently asked questions
What's the difference between an anchor and a page link?
An anchor leads to a section of the same page (#section); a page link leads to another page of the site. Confusing them breaks the navigation.
How do I create a menu that scrolls to a section?
You place a "menu anchor" on the section, then create a link to its identifier (#anchor). By enabling smooth scroll, the arrival is gentle.
Should I test the menu on mobile?
Yes: on mobile, the menu often folds into a hamburger. Check that it opens, that the anchors work, and that the targets are big enough for a finger.
Nadia wants a click on "Projects" to lead to the projects section of the same page, smoothly. What does she set up?