การเพิ่มแองเคอร์ลิงก์แบบเลื่อนในหน้าเดียวกัน

เขียนโดย

ใน

,

การเพิ่มลิงก์สมอสำหรับการเลื่อนหน้าเดียวกัน

นี่คือฟีเจอร์พรีเมียมและมีให้บริการในเวอร์ชัน 4.0.1 ขึ้นไป

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

คุณต้องมีสองสิ่งนี้เพื่อสร้างลิงก์สมอหน้าเดียวกัน:

  1. คลาสที่กำหนดเองหรือ ID ที่กำหนดเองบนองค์ประกอบ และ
  2. ลิงก์หรือปุ่มที่อ้างอิงถึงคลาสหรือ ID ที่กำหนดเองนั้น

1. คลาสที่กำหนดเองหรือ ID ที่กำหนดเองบนองค์ประกอบ

เลือกองค์ประกอบใดก็ได้ใกล้กับด้านล่างสุดของหน้าของคุณ แล้วเปิดคุณสมบัติขององค์ประกอบนั้น ในส่วนขั้นสูง ให้เพิ่มคลาสที่กำหนดเองหรือ ID ที่กำหนดเองชื่อ ” go_here“

2. ลิงก์หรือปุ่มที่อ้างอิงถึงคลาสหรือ ID ที่กำหนดเอง

ตอนนี้ให้สร้างลิงก์หรือเพิ่มองค์ประกอบปุ่มไว้ที่บริเวณใกล้ด้านบนของหน้าของคุณ แทนที่จะเพิ่ม URL เป็นลิงก์ ให้ใช้ ” .go_here” (มีจุด) หากคุณเพิ่ม “go_here” เป็นคลาสที่กำหนดเอง หรือใช้ “#go_here” (มีเครื่องหมายแฮช) หากคุณเพิ่มเป็น ID ที่กำหนดเอง

หลังจากที่คุณบันทึกหน้าของคุณแล้ว เมื่อคุณคลิกที่ลิงก์/ปุ่ม หน้านั้นควรเลื่อนอย่างราบรื่นไปยังองค์ประกอบที่อยู่ด้านล่างสุดของหน้าคุณ

คุณยังสามารถใช้สิ่งนี้เพื่อกำหนดเป้าหมายไปยังสมอที่ตั้งชื่อไว้ (Named Anchors) ได้อีกด้วย

สมอที่ตั้งชื่อไว้ เช่น

<a name="go_here"></a>

ก็สามารถกำหนดเป้าหมายได้โดยการเพิ่มลิงก์ไปยัง “#go_here” (มีเครื่องหมายแฮช)

การใช้งานอื่นๆ

คุณยังสามารถกำหนดเป้าหมายไปยังส่วนอื่นๆ ในหน้าของคุณได้ แม้ว่าจะอยู่นอกพื้นที่ตัวแก้ไขก็ตาม ตราบใดที่คุณกำหนดเป้าหมายโดยใช้ชื่อคลาสหรือ ID ของส่วนเหล่านั้น