Link Types
📍 Anchor Links — Same Page Mein Jump
href="#biryani-section"
Anchor links SAME page ke kisi specific section pe jump karte hain. Jaise Paradise menu mein — "Desserts dekho" top pe likha hai, click karo seedha Desserts section pe pahuncho. Koi page load nahi, sirf smooth scroll.
Do cheezein chahiye: link with #id aur target element with us id attribute. `#` browser ko kehta hai "is page pe raho, bas yeh ID dhundo."
Hyderabad Analogy: Tum Lumbini Park ke main gate pe ho. Sign pe likha "Boat ride → Section C." Tum Section C pe chalte jaate ho — same park, different section. Park se bahar jaane ki zaroorat nahi.
Code Example
HTML — Anchor Links — Same Page Mein Jump
<!-- Top pe navigation links -->
<nav>
<a href="#starters">Starters</a>
<a href="#main-course">Main Course</a>
<a href="#desserts">Desserts</a>
</nav>
<!-- Sections with matching IDs -->
<h2 id="starters">Starters</h2>
<p>Paneer tikka, chicken 65, hara bhara kebab...</p>
<h2 id="main-course">Main Course</h2>
<p>Mutton biryani, chicken biryani, haleem...</p>
<h2 id="desserts">Desserts</h2>
<p>Double ka meetha, qubani ka meetha...</p>
<!-- Page ke top pe wapas -->
<a href="#">↑ Back to top</a>href="#starters"Link — id="starters" wale element pe jumpid="starters"Target — jahan jump karna haihref="#"Empty anchor — page ke top pe jump✅ When to Use
- Long pages ke top pe table of contents
- FAQ pages — "Answer pe jump karo"
- Single page websites jisme sections hain
- Back to top button
❌ When NOT to Use
- Doosre pages pe jaana (regular links use karo)
- Jab content chhota ho — jump ki zaroorat nahi
CSS mein `html` element pe `scroll-behavior: smooth` add karo. Phir anchor links instantly jump nahi honge — smoothly scroll honge. UX ke liye game changer.