Membuat Efek Smooth Scrolling Pada CSS

Update Terakhir pada

Assalamualaikum Wr. Wb.

Teman-teman, gimana nih kabarnya??? Mudah mudahan sehat dan bahagia selalu ya, Amin.
Alhamdulillah kali ini kita akan berbagi ilmu lagi.

Pada kesempatan ini kita akan belajar Efek Smooth Scrolling menggunakan script dari CSS.
Nah, ngomong-ngomong…Apa sih itu Smooth Scrolling???

Mungkin teman-teman pernah liat sebuah website yang full page atau satu halaman penuh, saat kita klik salah satu menu yang terdapat disitu maka halaman akan berpindah secara pelan-pelan.
Biasanya pergerakannya pelan-pelan dari atas ke bawah atau biasanya dari bawah ke atas. Yah, itu tergantung menu.

Nah, kurang lebih seperti itulah Smooth Scrolling. Disini kita akan membuatnya tanpa harus menggunakan JQuery atau library lainnya.
Cukup menggunakan CSS aja.

Oke langsung aja kita mulai.

  1. Buat file baru dengan Format HTML. Lalu ketikkan script seperti berikut ini.
<!DOCTYPE html>
<html>

<head>
    <title>Smooth Scrolling</title>
</head>

<body>

    <section id="halaman1">
        <h2>Halaman 1</h2>
        <a href="#halaman2">Klik Disini untuk ke Halaman 2</a>
    </section>

    <section id="halaman2">
        <h2>Halaman 2</h2>
        <a href="#halaman1">Klik Disini untuk ke Halaman 1</a>
    </section>

</body>

</html>

2. Sebagai contoh disini, pada langkah 1 tersebut kita sedang membuat 2 halaman aja. Lalu lanjutkan dengan script kode CSSnya pada tag <head></head>.

<style>
    html, body, section
    {
        height: 100%;
    }

    html
    {
        scroll-behavior: smooth;
    }

    body
    {
        font-family: Arial, Helvetica, sans-serif;
    }

    section
    {
        display: block;
        padding: 25px;
    }

    a
    {
        color: white;
    }

    #halaman1
    {
        background-color: chocolate;
        color: white;
    }

    #halaman2
    {
        background-color: black;
        color: white;
    }
</style>

3. Berikut ini adalah script secara keseluruhan.

<!DOCTYPE html>
<html>
<head>
    <title>Smooth Scrolling</title>
    <style>
        html, body, section 
        {
            height: 100%;
        }

        html 
        {
            scroll-behavior: smooth;
        }

        body 
        {
            font-family: Arial, Helvetica, sans-serif;
        }

        section 
        {
            display: block;
            padding: 25px;
        }

        a 
        {
            color: white;
        }

        #halaman1 
        {
            background-color: chocolate;
            color: white;
        }

        #halaman2 
        {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>

    <section id="halaman1">
        <h2>Halaman 1</h2>
        <a href="#halaman2">Klik Disini untuk ke Halaman 2</a>
    </section>

    <section id="halaman2">
        <h2>Halaman 2</h2>
        <a href="#halaman1">Klik Disini untuk ke Halaman 1</a>
    </section>

</body>

</html>

4. Kira-kira, seperti inilah hasilnya. Lalu coba klik link yang mengarah ke halaman selanjutnya yang ada pada halaman ini.

5. Maka akan tampil halaman berikutnya seperti di bawah ini. Sama seperti langkah 4, klik link yang mengarah ke halaman sebelumnya yang ada pada halaman ini

Nah, mudah bukan???

Akhir kata, semoga bermanfaat ya dan selamat mencoba.

Sukses selalu ya, man teman.

Wassalamulaikum Wr. Wb.