Cara Membuat Scroll Smooth dengan CSS

Cara Membuat Scroll Smooth dengan CSS - Pada CSS terdapat properti scroll-behavior, properti CSS scroll-behavior bisa kita manfaatkan untuk membuat efek scroll smooth. Nah, pada kesempatan kali ini saya akan bagikan tutorial CSS tentang bagaimana Cara Membuat Scroll Smooth dengan CSS tentunya dengan memanfaatkan properti scroll-behavior. Buat kalian yang ingin mencoba membuatnya silahkan ikuti langkah - langkahnya berikut ini.

Efek scroll smooth yang akan dibuat nantinya adalah ketika user klik tombol maka akan terjadi efek scroll perpindahan kepada konten yang dituju. Nah, silahkan kalian buat dulu konten dan struktur sederhana HTMLnya seperti berikut.

<body>
    <div id="section-1">
      <h2>DUMETSchool</h2>
      <p>DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis. Sampai saat ini DUMET School sudah memiliki lulusan lebih dari 8000 orang dari berbagai status dan profesi mulai dari pelajar sekolah, mahasiswa, guru, dosen, staff profesional, freelancer, dll. </p>
      <a href="#section-2">Klik Tentang kami</a>
    </div>
    <div id="section-2">
      <p>DUMET School adalah tempat Kursus Website, Digital Marketing, dan Desain Grafis yang berlokasi di Jakarta dan Depok.</p>
      <a href="#section-1">Klik DUMETSchool</a>
    </div>
</body>

Setelah membuat konten dan struktur HTML sperti diatas, langkah selanjutnya untuk membuat efek scroll berfungsi tentu kita akan tambahkan style CSS dan membuat efek scroll smooth pada konten yang telah kita buat. Silahkan kalian ketikan sintak CSS berikut untuk membuat efek scroll smooth.

<style>
    * {margin: 0; padding: 0}
    html {
        scroll-behavior: smooth;
    }
    #section-1 {
        height: 500px;
        color: white;
        padding: 10px;
        background-color: darkcyan;
    }
    #section-2 {
        height: 800px;
        color: white;
        padding: 10px;
        background-color: darkorange;
    }
    a {
        background-color: #222222;
        padding: 10px;
        color: white;
        text-decoration: none;
        margin-top: 20px;
        display: inline-block;
    }
</style>

Setelah semua sintak HTML dan CSS telah diketikan semua, simpan filenya kemudian kalian bisa membuka pada browser masing - masing untuk melihat hasilnya. Selesai
Baik, itulah tutorial CSS tentang bagaimana Cara Membuat Scroll Smooth dengan CSS semoga tutorial ini bermanfaat selamat mencoba dan sampai jumpa ditutorial dumetschool selanjutnya :)

12 Desember 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat