home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีสร้าง Bookmark Link (Anchor Link) ใน HTML

Bookmark Link (หรือ Anchor Link) ใช้สำหรับลิงก์ไปยังส่วนเฉพาะในหน้าเว็บเดียวกัน หรือหน้าอื่น ใช้งานได้ด้วย id attribute (HTML5) แทน name attribute ที่ deprecated แล้ว

วิธีการ (HTML5 Standard)

  1. กำหนด id ให้ element เป้าหมาย: <h2 id="section1">Section 1</h2>
  2. สร้างลิงก์ไปยัง id นั้น: <a href="#section1">Go to Section 1</a>

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>HTML Bookmark Link</title>
</head>
<body>
  <h1>Tutorials</h1>
  <nav>
    <a href="#programming">Programming</a> |
    <a href="#design">Design</a> |
    <a href="#databases">Databases</a>
  </nav>

  <h2 id="programming">Programming</h2>
  <p>Programming tutorials...</p>

  <h2 id="design">Design</h2>
  <p>Design tutorials...</p>

  <h2 id="databases">Databases</h2>
  <p>Database tutorials...</p>

  <a href="#top">Back to top</a>
</body>
</html>

รูปแบบเก่า (Deprecated)

<!-- ไม่ควรใช้แล้ว -->
<a name="section1">Section 1</a>
<a href="#section1">Go to Section 1</a>

เคล็ดลับ

  • ใช้ scroll-behavior: smooth ใน CSS เพื่อเลื่อนหน้าอนิเมชัน
  • id ต้องไม่ซ้ำกันในหน้าเดียวกัน
  • id เริ่มต้นด้วยตัวอักษร ไม่ใช่ตัวเลข
  • ลิงก์ข้ามหน้า: <a href="page.html#section">