Skip to main content

Membuat Scroll Indicator Dengan Javascript

Membuat Scroll Indicator Dengan Javascript - Ini adalah salah satu cara untuk mempercantik tampilan blog sehingga terkesan lebih hidup, yaitu membuat scroll indicator. Sebuah garis yang biasanya disimpan di atas blog yang akan menunjukan sampai dimana halaman discroll.

Scroll indicator ini mungkin mirip dengan loading indicator yang sama-sama disimpan di atas blog dan persentasinya ditunjukan dengan warna yang akan semakin bergeser ke kanan jika halaman terus discroll ke bawah dan bergeser ke kiri jika halaman discroll ke atas.

Scroll indicator ini menggunakan javascript, hanya beberapa baris javascript dan tidak memerlukan Jquery Library karena ini pure javascript.

Namun saran saya dalam menggunakan scroll indicator ini untuk dipertimbangkan apakah benar-benar diperlukan atau tidak, agar tidak menambah beban loading blog. Apalagi jika blog sudah menggunakan script yang banyak.

Baiklah, sekarang mari kita membuat scroll indicator ini.

Silahkan simpan CSS berikut di style blog Anda.


.progress-container {
  width: 100%;
  height: 3px;
  background: #00796B;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999
}

.progress-bar {
  height: 3px;
  background: #76FF03;
  width: 0%
}

Silahkan sesuaikan background yang ditandai agar sesuai dengan tema blog atau sesuai selera Anda.

.progress-container adalah tempat scroll indicator berada, dan .progress-bar adalah indikator scroll yang bergeser dari kiri ke kanan.

Kemudian silahkan simpan kode HTML dan javascript berikut di atas kode </body>


  <div class="progress-container">
    <div class="progress-bar" id="progressbar"></div>
  </div>

<script>
//<![CDATA[
window.addEventListener("scroll", 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("progressbar").style.width = scrolled + "%";
}
//]]>
</script>

Selamat mencoba dan semoga bermanfaat.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB