HTML Link Bookmarks

id से Destination Mark करना

किसी भी HTML element को एक unique id attribute देकर एक bookmark destination बनाया जा सकता है -- इसके लिए कोई special anchor tag ज़रूरी नहीं है; एक heading, एक div, या एक paragraph, ये सभी jump target का काम कर सकते हैं जब तक उनका id page पर unique हो।

उदाहरण: Marking a Destination with id

<h2 id="pricing">Pricing</h2>

उसी Page पर किसी Destination से Link करना

कोई link अपने href को # symbol और target id के साथ सेट करके current page पर किसी destination पर jump करता है -- href="#pricing" ब्राउज़र को सीधे id="pricing" वाले element पर scroll कराता है, बिना कभी current page छोड़े या reload किए।

उदाहरण: Linking to a Destination on the Same Page

<a href="#pricing">Jump to Pricing</a>
<h2 id="pricing">Pricing</h2>

किसी दूसरे Page पर Destination से Link करना

एक bookmark link एक normal file path या URL को #id fragment के साथ combine करके पूरी तरह अलग page के किसी section की ओर भी इशारा कर सकता है -- href="article.html#conclusion" article.html लोड करता है और फिर तुरंत id="conclusion" वाले element पर scroll करता है।

उदाहरण: Linking to a Destination on Another Page

<a href="article.html#conclusion">Read the conclusion</a>

Bookmarks के लिए Smooth Scrolling

By default, bookmark navigation बिना किसी animation के तुरंत destination पर snap हो जाता है।

html element में scroll-behavior: smooth जोड़ने से ब्राउज़र इसके बजाय scroll को smoothly animate करता है, जिससे readers को teleport होने के बजाय page में आगे बढ़ने का स्पष्ट एहसास होता है।

उदाहरण: Smooth Scrolling to Bookmarks

<style>
  html {
    scroll-behavior: smooth;
  }
</style>
<a href="#pricing">Jump to Pricing</a>
<h2 id="pricing">Pricing</h2>

Bookmarks को Navigation Menus के साथ Combine करना

Bookmark links को अक्सर page के ऊपर एक sticky navigation menu में combine किया जाता है, जिससे visitors पूरा page reload trigger किए बिना major sections (जैसे Home, Features, Pricing, Contact) के बीच jump कर सकते हैं, जो browsing experience को तेज़ और app-like बनाए रखता है।

उदाहरण: Combining Bookmarks with Navigation Menus

<nav>
  <a href="#home">Home</a>
  <a href="#features">Features</a>
  <a href="#pricing">Pricing</a>
</nav>