Pengguliran antar-section kini halus, tetapi nav belum memberi tahu posisi pembaca: setelah melompat ke “Keahlian”, tidak ada penanda tautan mana yang sedang aktif. Bagian terakhir ini menambahkan dua interaksi ringan: penandaan tautan nav yang baru dipilih lewat aria-current, dan tombol kembali ke atas untuk halaman panjang. Keduanya digerakkan JavaScript dari section HTML dan JavaScript.

Menandai Tautan yang Sedang Dipilih #

Dua status berjalan berpasangan. Atribut aria-current="true" pada tautan memberi tahu pembaca layar bahwa butir navigasi itu sedang dipilih, sedangkan class aktif menggarisbawahinya secara visual. Sebelum menandai tautan baru, skrip membersihkan status dari tautan lain, sehingga hanya satu tautan yang aktif pada satu waktu.

File portofolio-interaktif.html pada folder bagian ini melengkapi portofolio-styling.html dengan satu tag script di head serta tombol penutup di akhir main:

html Cuplikan portofolio-interaktif.html 
  <link rel="stylesheet" href="../styles/style.css">
  <script src="navigasi.js" defer></script>
  <!-- baris 11-57: header, nav, dan empat section -->
  <button class="tombol-atas" type="button">Kembali ke atas</button>

Atribut defer pada tag script menunda eksekusi hingga dokumen selesai dibaca, sehingga daftar tautan dan tombolnya telah tersedia saat skrip berjalan.

Skrip Interaksi Navigasi #

Interaksinya digerakkan oleh file navigasi.js yang berdampingan dengan halamannya:

javascript navigasi.js 
const tautanNav = document.querySelectorAll("nav a");
const tombolAtas = document.querySelector(".tombol-atas");

tautanNav.forEach(function (tautan) {
  tautan.addEventListener("click", function () {
    tautanNav.forEach(function (lainnya) {
      lainnya.classList.remove("aktif");
      lainnya.removeAttribute("aria-current");
    });
    tautan.classList.add("aktif");
    tautan.setAttribute("aria-current", "true");
  });
});

tombolAtas.addEventListener("click", function () {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

Output yang Dihasilkan:

text 
Saat tautan "Proyek" pada nav diklik:
  - Halaman menggulir dengan halus ke section proyek
  - Tautan "Proyek" tergaris bawahi sebagai penanda visual
  - Pembaca layar mengumumkan butir tersebut sebagai butir terpilih
Saat tautan nav lain diklik:
  - Garis bawah berpindah ke tautan yang baru
Saat tombol "Kembali ke atas" ditekan:
  - Halaman menggulir dengan halus kembali ke posisi teratas

Mari kita bedah skrip tersebut:

  1. Baris 1-2: querySelectorAll("nav a") mengumpulkan seluruh tautan nav sebagai daftar, dan querySelector mengambil referensi tombol ke atas.
  2. Baris 4-13: listener klik pada setiap tautan membersihkan class aktif dan atribut aria-current dari semua tautan, lalu menetapkannya kembali pada tautan yang diklik.
  3. Baris 6-8: loop di dalam listener menghapus status lama dari classList dan atributnya.
  4. Baris 15-17: listener klik pada tombol memanggil window.scrollTo dengan opsi behavior: "smooth" sehingga halaman menggulir ke posisi teratas dengan halus.

Pemeriksaan Hasil Tahap Ini #

  1. Buka portofolio-interaktif.html, lalu klik tautan nav satu per satu; garis bawah berpindah mengikuti tautan yang dipilih.
  2. Periksa DOM dengan alat inspeksi browser: tautan aktif membawa atribut aria-current=“true”.
  3. Gulir ke bawah, lalu tekan tombol “Kembali ke atas”; halaman kembali ke posisi teratas dengan halus.
  4. Jalankan tests/cek-struktur.html, lalu lengkapi butir yang tersisa hingga 10 dari 10.

Sampai di sini proyek Website Portofolio tuntas: kerangka valid, konten terhubung navigasi, tampilan berpalet konsisten, dan interaksi navigasi yang hidup. Proyek berikutnya, Website Artikel, melatih pola serupa untuk halaman berita dengan metadata.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

navigasi.js

Unduh berkas
javascript 
const tautanNav = document.querySelectorAll("nav a");
const tombolAtas = document.querySelector(".tombol-atas");

tautanNav.forEach(function (tautan) {
  tautan.addEventListener("click", function () {
    tautanNav.forEach(function (lainnya) {
      lainnya.classList.remove("aktif");
      lainnya.removeAttribute("aria-current");
    });
    tautan.classList.add("aktif");
    tautan.setAttribute("aria-current", "true");
  });
});

tombolAtas.addEventListener("click", function () {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

portofolio-interaktif.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Portofolio Siti Rahma, pengembang web yang fokus pada halaman cepat dan aksesibel.">
  <title>Portofolio Siti Rahma</title>
  <link rel="stylesheet" href="../styles/style.css">
  <script src="navigasi.js" defer></script>
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram SR" width="56" height="56">
    <div>
      <h1>Siti Rahma</h1>
      <p>Pengembang web: antarmuka cepat dan aksesibel</p>
    </div>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="#beranda">Beranda</a></li>
        <li><a href="#proyek">Proyek</a></li>
        <li><a href="#keahlian">Keahlian</a></li>
        <li><a href="#kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="beranda">
      <h2>Selamat Datang</h2>
      <p>Saya membangun halaman web yang rapi dari sisi struktur dan ringan dari sisi ukuran berkas. Jelajahi daftar proyek di bawah, lalu hubungi saya bila ada ide yang ingin dikembangkan bersama.</p>
      <p><a href="#proyek">Lihat daftar proyek</a></p>
    </section>
    <section id="proyek">
      <h2>Proyek Pilihan</h2>
      <article>
        <h3>Galeri Foto Kelas</h3>
        <p>Halaman galeri untuk karya fotografi siswa, dibangun dengan figure dan img yang membawa atribut alt lengkap.</p>
        <p><a href="www.example.com/galeri-foto-kelas">www.example.com/galeri-foto-kelas</a></p>
      </article>
      <article>
        <h3>Buku Resep Dapur</h3>
        <p>Kumpulan resep keluarga yang disusun per kategori dengan daftar bersarang dan tabel takaran.</p>
        <p><a href="www.example.com/buku-resep">www.example.com/buku-resep</a></p>
      </article>
    </section>
    <section id="keahlian">
      <h2>Keahlian</h2>
      <ul>
        <li>Struktur dokumen HTML yang semantik</li>
        <li>Tabel dan daftar untuk konten terstruktur</li>
        <li>Optimasi gambar agar halaman tetap ringan</li>
      </ul>
    </section>
    <section id="kontak">
      <h2>Kontak</h2>
      <p>Surel: <a href="mailto:[email protected]">[email protected]</a></p>
    </section>
    <button class="tombol-atas" type="button">Kembali ke atas</button>
  </main>
  <footer>
    <p>&copy; 2025 Siti Rahma</p>
  </footer>
</body>
</html>