Link Anchor dan Navigasi Satu Halaman

Pembatas Buku Ajaib

Pernah memakai pembatas buku? Kamu selipkan di halaman favorit, dan kapan pun ingin kembali ke sana, kamu langsung melompat tanpa membolak-balik dari halaman satu. Link anchor di HTML bekerja dengan cara yang sama, tetapi lebih ajaib: pembatasnya bisa diklik, dan "buku"-nya adalah halaman web yang panjang.

Secara teknis, link anchor adalah link biasa yang href-nya diawali tanda pagar (#) diikuti id elemen tujuan, misalnya href="#harga". Saat diklik, browser tidak memuat halaman baru, melainkan menggulir langsung ke elemen yang punya id="harga". Inilah fondasi dari navigasi satu halaman (one-page navigation) yang kamu lihat di hampir semua landing page modern: klik "Fitur", halaman meluncur ke bagian fitur; klik "Harga", meluncur ke bagian harga.

Kenapa Konsep Ini Ada

Sebelum JavaScript canggih merajalela, anchor adalah satu-satunya cara berpindah di dalam halaman tanpa memuat ulang. Tiga kegunaan klasiknya bertahan sampai hari ini:

• Daftar isi yang bisa diklik pada artikel panjang, dokumentasi, dan laporan.
• Navigasi satu halaman pada landing page: satu file HTML berisi semua bagian, menu di atas melompat antar bagian.
• Tombol "kembali ke atas" di akhir artikel panjang, supaya pembaca tidak menggulir manual.

Karena ini murni fitur HTML, ia bekerja bahkan saat JavaScript dimatikan, dan ia otomatis tercatat di riwayat browser (tombol back tetap berfungsi).

Contoh 1: Daftar Isi Sederhana

Pola dasarnya hanya butuh dua hal: id unik pada elemen tujuan, dan link dengan href="#id" tersebut.

<h2>Daftar Isi</h2>
<ul>
  <li><a href="#pengenalan">Pengenalan</a></li>
  <li><a href="#bahan">Bahan-bahan</a></li>
  <li><a href="#langkah">Langkah Memasak</a></li>
</ul>

<h2 id="pengenalan">Pengenalan</h2>
<p>Rendang adalah...</p>

<h2 id="bahan">Bahan-bahan</h2>
<p>Siapkan daging sapi...</p>

<h2 id="langkah">Langkah Memasak</h2>
<p>Pertama, tumis bumbu...</p>

<p><a href="#atas">Kembali ke atas</a></p>

Supaya link "Kembali ke atas" bekerja, tambahkan id="atas" pada elemen paling atas halaman, misalnya <body id="atas"> atau pada heading judul. Perhatikan bahwa id tidak boleh diawali angka dan harus unik dalam satu halaman.

Contoh 2: Landing Page Satu Halaman yang Realistis

Sekarang contoh yang lebih nyata: landing page produk dengan menu navigasi yang selalu terlihat (sticky) di atas, plus tombol kembali ke atas di setiap bagian.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Kopi Nusantara: Landing Page</title>
  <style>
    html { scroll-behavior: smooth; }
    nav {
      position: sticky;
      top: 0;
      background: #fff;
      padding: 1rem;
      border-bottom: 1px solid #ddd;
    }
    section { padding: 4rem 1rem; }
  </style>
</head>
<body id="atas">
  <nav>
    <a href="#atas">Kopi Nusantara</a> |
    <a href="#fitur">Fitur</a> |
    <a href="#testimoni">Testimoni</a> |
    <a href="#harga">Harga</a> |
    <a href="#kontak">Kontak</a>
  </nav>

  <section id="fitur">
    <h2>Fitur Unggulan</h2>
    <p>Biji kopi pilihan dari petani lokal...</p>
    <p><a href="#atas">Kembali ke atas</a></p>
  </section>

  <section id="testimoni">
    <h2>Kata Pelanggan</h2>
    <p>"Kopinya mantap!" kata Budi.</p>
    <p><a href="#atas">Kembali ke atas</a></p>
  </section>

  <section id="harga">
    <h2>Harga</h2>
    <p>Mulai dari Rp25.000 per 200 gram.</p>
    <p><a href="#atas">Kembali ke atas</a></p>
  </section>

  <section id="kontak">
    <h2>Hubungi Kami</h2>
    <p>WhatsApp: 0812-3456-7890</p>
    <p><a href="#atas">Kembali ke atas</a></p>
  </section>
</body>
</html>

Tiga hal yang membuat contoh ini terasa profesional: position: sticky pada nav membuat menu selalu terlihat saat menggulir; scroll-behavior: smooth membuat lompatan terasa meluncur halus, bukan patah-patah; dan id pada tiap section memberi target yang jelas untuk setiap link menu.

Kesalahan Umum Pemula

Salah: href="#" sebagai link mati.

<!-- SALAH: melompat ke atas halaman tanpa tujuan jelas -->
<a href="#">Klik di sini</a>

<!-- BENAR: selalu punya target id yang nyata -->
<a href="#harga">Lihat harga</a>

href="#" menggulir ke atas halaman dan menambah riwayat browser yang membingungkan. Kalau link belum punya tujuan, lebih baik jangan dibuat dulu.

Salah: id ganda dalam satu halaman.

<!-- SALAH: browser hanya melompat ke yang pertama -->
<h2 id="harga">Harga Ecer</h2>
...
<h2 id="harga">Harga Grosir</h2>

<!-- BENAR: id harus unik -->
<h2 id="harga-ecer">Harga Ecer</h2>
...
<h2 id="harga-grosir">Harga Grosir</h2>

Salah: link anchor menunjuk ke id yang tidak ada. Salah ketik satu huruf saja (href="#hagra") membuat link tidak melakukan apa-apa saat diklik. Selalu periksa ejaannya, karena browser tidak memberi pesan error.

Salah: target tertutup menu sticky. Ini jebakan klasik: setelah melompat, judul bagian tertutup di balik menu navigasi yang sticky, sehingga pembaca tidak melihat judulnya. Solusi modernnya adalah properti CSS scroll-margin-top pada elemen target:

<style>
  section { scroll-margin-top: 80px; }
</style>

Angkanya disesuaikan dengan tinggi menu navigasimu. Dengan ini, browser memberi jarak otomatis setiap kali melompat ke bagian tersebut.

Catatan teknis: Saat link anchor diklik, browser menambahkan #id ke URL (disebut fragment). Artinya link tersebut bisa dibagikan: kirim https://contoh.com/artikel#harga ke temanmu, dan halamannya langsung terbuka pada bagian harga. Fragment tidak dikirim ke server, ia murni urusan browser, sehingga teknik ini gratis tanpa backend apa pun.