คุณสามารถใช้ลิงก์ anchor (<a>) ใน HTML เพื่อลิงก์ไปหน้าอื่นหรือเว็บไซต์อื่น แต่จะลิงก์ไปส่วนเฉพาะของหน้าเว็บได้อย่างไร?
คำตอบคือ Jump Links
Jump Links คือลิงก์ที่ไม่ได้แค่โหลดหน้า แต่จะ "กระโดด" ลงไปยังส่วนเฉพาะของหน้าเว็บ คุณสามารถใช้ภายในเพื่อลิงก์ไปหน้าอื่นของเว็บไซต์ตัวเอง และแชร์ลิงก์ภายนอกได้เช่นกัน
ลิงก์เหล่านี้ทำงานได้ไม่ว่าผู้ใช้จะมาจากที่ไหน และไม่ต้องการอะไรมากกว่า HTML พื้นฐาน
การสร้าง Anchor Jump Links
ใน HTML คุณสามารถสร้าง anchor link โดยใช้ชุดแท็ก <a> พร้อมข้อความภายใน ตัวอย่าง:
<a>Here is a link that doesn't go anywhere!</a>ใช้ attribute id สำหรับเป้าหมายลิงก์
ตอนนี้ เพื่อสร้าง jump link เราต้องการลิงก์และเป้าหมาย (target) เป้าหมายสามารถเป็น element ใดก็ได้บนหน้าเว็บที่มี attribute "id"
เป้าหมายที่พบบ่อยคือ headline หรือ subheadline ใช้แท็ก H เช่น <h1>, <h2>, <h3> เป็นต้น โดยปกติแล้วควรเพิ่ม id ให้แท็ก H เพื่อวัตถุประสงค์นี้
สมมติเรามีหน้าเว็บยาว และต้องการลิงก์ไปส่วนที่ลักษณะดังนี้:
<h2 id="extra_content">Extra content we don't want to link to</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed porta est, nec pretium lectus. Quisque sit amet porta risus, sed faucibus magna. </p> <h2 id="linked_content">Subheadline of a section to link to</h2> <p> Vivamus orci erat, sagittis vitae aliquam at, pretium sagittis neque. Curabitur vel eros in turpis elementum sollicitudin. </p>ลิงก์ไปยัง element ใน URL
ตอนนี้เรามี element เป้าหมายแล้ว สามารถสร้าง jump link ได้โดยเพิ่ม #linked_content ท้าย URL ของหน้า ไม่ว่าจะเป็น id อะไรของเป้าหมาย ให้เพิ่มหลังสัญลักษณ์ # (pound/hashtag)
หากเราอยู่บนหน้าและต้องการกระโดดลงส่วนบนหน้าเดียวกัน สร้าง internal link Internal link ไม่ต้องมี https://www.WebsiteName.com ใน attribute href ของลิงก์
ตัวอย่าง internal jump link:
<a href="#linked_content">Link to the subheadline on the same page</a>ถ้าคุณเพิ่มลิงก์บนเว็บไซต์อื่น หรือแชร์บนโซเชียลมีเดีย/อีเมล ก็ทำได้โดยเพิ่ม #linked_content ท้าย URL เต็ม เช่นนี้:
<a href="https://www.WebsiteName.com/PageName/#linked_content">Link to the subheadline on the same page</a>หมายเหตุเกี่ยวกับ attribute "name"
ในอดีต jump links ประเภทนี้ใช้ attribute "name" บน anchor link ว่าง ตัวอย่างนี้ล้าสมัยตั้งแต่ HTML5 ตาม Mozilla Developer Network อาจยังทำงานในบางเบราว์เซอร์ แต่แนะนำให้ใช้วิธีปัจจุบันแทน
หวังว่าจะช่วยคุณสร้าง jump links ไปส่วนเฉพาะของหน้าเว็บได้!
