วิธีทำให้ลิงก์สมอ HTML ข้ามไปยังส่วนใดส่วนหนึ่งของหน้า

คุณสามารถใช้สมอ (<a> ) ลิงก์ใน HTML เพื่อเชื่อมโยงไปยังหน้าอื่นหรือเว็บไซต์อื่น แต่คุณจะลิงก์ไปยังส่วนใดส่วนหนึ่งของหน้าเว็บได้อย่างไร

คำตอบคือ ข้ามลิงก์ .

ลิงก์ข้ามคือลิงก์ที่ไม่เพียงแต่โหลดหน้า แต่จะ "ข้าม" ลงไปที่ส่วนใดส่วนหนึ่งของหน้าเว็บ คุณสามารถใช้ภายในเพื่อเชื่อมโยงไปยังหน้าอื่นของเว็บไซต์ของคุณ และคุณยังสามารถแชร์ลิงก์กับภายนอกได้อีกด้วย

ลิงก์เหล่านี้จะใช้งานได้ไม่ว่าผู้ใช้จะมาจากไหน และไม่ต้องการอะไรนอกจาก HTML พื้นฐานในการทำงาน

การสร้างลิงก์กระโดดของสมอ

ใน HTML คุณสามารถสร้างลิงก์สมอได้โดยใช้ชุด <a> แท็กที่มีข้อความอยู่ข้างใน นี่คือตัวอย่าง:

<a>Here is a link that doesn't go anywhere!</a>

ใช้แอตทริบิวต์ id สำหรับเป้าหมายของลิงก์

ตอนนี้ ในการสร้างลิงก์แบบกระโดด เราจำเป็นต้องมีลิงก์และเราต้องการเป้าหมาย เป้าหมายสามารถเป็นองค์ประกอบใดก็ได้ในหน้าเว็บที่มีแอตทริบิวต์ "id"

เป้าหมายทั่วไปจริงๆ จะเป็นพาดหัวหรือหัวข้อย่อยโดยใช้แท็ก 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>

เชื่อมโยงไปยังองค์ประกอบใน URL

ตอนนี้เรามีองค์ประกอบเป้าหมายแล้ว เราสามารถสร้างลิงค์ข้ามไปยังมันโดยเพิ่ม #linked_content ต่อท้าย URL ของหน้า ไม่ว่า id ของเป้าหมายจะเป็นอะไร ให้เพิ่มหลัง # (ปอนด์/แฮชแท็ก) สัญลักษณ์

หากเราอยู่บนเพจและต้องการข้ามไปยังส่วนในหน้าเดียวกัน เราสามารถสร้างลิงก์ภายในได้ ลิงก์ภายในไม่ต้องใช้ https://www.WebsiteName.com ใน href . ของลิงก์ แอตทริบิวต์

ตัวอย่างของลิงก์ข้ามภายในอาจเป็น:

<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>

หมายเหตุเกี่ยวกับแอตทริบิวต์ "ชื่อ"

ในอดีต ลิงก์ข้ามประเภทนี้กำหนดเป้าหมายโดยใช้แอตทริบิวต์ "ชื่อ" บนลิงก์สมอที่ว่างเปล่า แนวทางปฏิบัตินี้ล้าสมัยตั้งแต่ HTML5 ตาม Mozilla Developer Network มันยังคงใช้งานได้ในบางเบราว์เซอร์ แต่ฉันขอแนะนำอย่างยิ่งให้คุณใช้วิธีการเชื่อมโยงที่เป็นปัจจุบันมากขึ้น

ฉันหวังว่านี่จะช่วยคุณในการสร้างลิงก์ข้ามไปยังส่วนใดส่วนหนึ่งของหน้าเว็บ!