Cara Membuat Scroll Indikator

Di bawah ini kita akan mempelajari cara membuat scroll indikator dengan CSS dan JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.header h2 {
  text-align: center;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #FF0000;
  width: 0%;
}

.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>  
</div>

<div class="content">
  <h3>Scroll Ke Bawah Untuk Melihat Efeknya</h3>
<p> Kita telah membuat "Scroll bar" untuk <b> menunjukkan seberapa jauh halaman telah di-scroll </b>. </p>
   <p> Ini juga <b> berfungsi saat akan mengscroll halaman  kembali ke atas </b>. </p>
   <p> Ukurannya juga <b> responsif </b>! Ubah ukuran jendela browser untuk melihat efeknya. </p>
  <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
  <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
   <p>Scroll bar digunakan untuk menunjukan jumlah halaman yang telah di scroll, Indikator posisi scroll memiliki bentuk yang berbeda: variasi pada scroll bar vertikal, elemen horizontal di bagian atas atau bawah halaman, dan gaya lainnya. Jadi cobalah untuk mengscroll halaman ini hingga ke bawah dan lihat apayang terjadi. Teks ini akan di tulis berulang agar terlihat panjang </p>
</div>

<script>
// Saat pengguna mengscroll halaman, jalankan myFunction
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

</body>
</html>

Cara Membuat Scroll Indikator

Langkah 1) Tambahkan HTML:
Contoh

<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>

<div>content...</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Style pada header: posisi tetap (selalu berada di atas) */
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

/* progress kemajuan (latar belakang abu-abu) */
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #4caf50;
  width: 0%;
}

Langkah 3) Tambahkan JavaScript:
Contoh

<script>
// Saat pengguna mengscroll halaman, jalankan myFunction
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

CSS How To

Cara Membuat Scroll Indikator

Cara Membuat Scroll Indikator

Cara Membuat Timeline

Cara Membuat Progress Bar

You may also like