CSS Academy · Pelajaran

scroll-behavior: smooth

Aktifkan pengguliran mulus untuk tautan jangkar dan pengguliran terprogram dengan scroll-behavior.

scroll-behavior: smooth adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa itu scroll-behavior?

scroll-behavior mengatur apakah pengguliran yang dipicu oleh navigasi (tautan jangkar, JavaScript scrollTo()) akan dianimasikan dengan halus atau langsung berpindah.

scroll-behavior: smooth

Menetapkan scroll-behavior: smooth pada elemen html atau body membuat semua navigasi tautan jangkar halaman dianimasikan dengan halus:

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

Langsung vs Halus

Nilainya:

auto (default): lompatan langsung
smooth: pengguliran beranimasi menuju target

Navigasi Tautan Jangkar

Dengan pengguliran halus yang diaktifkan, mengeklik tautan seperti <a href="#contact"> akan menggulir dengan halus ke elemen dengan id="contact", bukan langsung berpindah.

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

JavaScript scrollTo() dengan Efek Halus

Berikan behavior: "smooth" pada metode pengguliran JavaScript untuk pengguliran beranimasi:

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

Interaksi prefers-reduced-motion

Pengguliran halus dapat memicu mabuk perjalanan. Selalu nonaktifkan fitur ini bagi pengguna yang memilih gerakan yang dikurangi:

  <p>Respects <code>prefers-reduced-motion</code>.</p>

scroll-behavior pada Wadah

Terapkan pada wadah apa pun yang dapat digulir, bukan hanya halaman:

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

Keterbatasan

scroll-behavior CSS tidak memberi kontrol atas durasi atau easing pengguliran. Untuk kontrol animasi yang presisi, gunakan Web Animations API JavaScript atau pustaka seperti GSAP dengan plugin penggulungannya.

scroll-padding-top untuk Header Tetap

Saat header tetap menutupi target jangkar, scroll-padding-top menambahkan offset agar target tidak tersembunyi di balik header:

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin vs scroll-padding

scroll-margin menambahkan offset langsung pada elemen target; scroll-padding menambahkan offset pada wadah pengguliran. Keduanya mengatasi masalah header tetap:

  <div class="section">Section content</div>

Catatan Aksesibilitas

Pengguliran halus merupakan penyempurnaan pengalaman pengguna. Selalu pastikan navigasi jangkar tetap berfungsi tanpanya — jangan mengandalkan perilaku pengguliran halus untuk fungsionalitas, gunakan hanya untuk penyempurnaan visual.

Pemeriksaan Singkat

Bagaimana cara memastikan animasi pengguliran halus dinonaktifkan bagi pengguna yang sensitif terhadap gerakan vestibular?

Ringkasan

scroll-behavior: smooth pada html mengaktifkan pengguliran beranimasi yang halus untuk tautan jangkar dan metode pengguliran JavaScript. Gunakan scroll-padding-top untuk memberi offset pada target pengguliran agar tidak berada di balik header tetap. Selalu nonaktifkan pengguliran halus di dalam kueri media prefers-reduced-motion: reduce demi aksesibilitas.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “scroll-behavior: smooth” gratis?

Ya — teks lengkap “scroll-behavior: smooth” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “scroll-behavior: smooth”?

Aktifkan pengguliran mulus untuk tautan jangkar dan pengguliran terprogram dengan scroll-behavior. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “scroll-behavior: smooth” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

overflow: hidden scroll auto clip
scroll-behavior: smooth
scroll-snap-type dan scroll-snap-align
Penataan Bilah Gulir dengan ::-webkit-scrollbar

← Kembali ke CSS Academy