Ditulis oleh: Ditulis pada: 5/10/2019
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.