contoh link dengan anchor

by oktaviardi pratama

HTML

<!-- MENU NAVIGASI -->
    <nav>
        <!-- href="#id_tujuan" harus sama dengan id di bawah -->
        <a href="#beranda">Beranda</a>
        <a href="#tentang">Tentang Kami</a>
        <a href="#layanan">Layanan</a>
        <a href="#kontak">Kontak</a>
    </nav>

    <!-- KONTEN HALAMAN -->
    
    <!-- Bagian 1 -->
    <section id="beranda">
        <h2>Selamat Datang di Beranda</h2>
    </section>

    <!-- Bagian 2 -->
    <section id="tentang">
        <h2>Tentang Kami</h2>
    </section>

    <!-- Bagian 3 -->
    <section id="layanan">
        <h2>Layanan Kami</h2>
    </section>

    <!-- Bagian 4 -->
    <section id="kontak">
        <h2>Hubungi Kami</h2>
    </section>

CSS

/* CSS Dasar agar terlihat rapi */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        /* Membuat menu navigasi tetap di atas (Sticky) */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #333;
            padding: 15px 0;
            text-align: center;
            z-index: 1000;
        }

        /* Styling Link Navigasi */
        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
            padding: 10px;
        }

        nav a:hover {
            background-color: #555;
            border-radius: 4px;
        }

        /* Styling Bagian Konten */
        section {
            height: 100vh; /* Tinggi layar penuh agar bisa discroll */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            color: white;
        }

        /* Warna berbeda untuk setiap bagian */
        #beranda { background-color: #3498db; }
        #tentang { background-color: #e74c3c; }
        #layanan { background-color: #2ecc71; }
        #kontak { background-color: #f1c40f; color: #333; }

        /* PENTING: Agar judul tidak tertutup oleh navbar saat di-scroll */
        h2 {
            padding-top: 60px; 
        }