Cara Membuat Scroll Bar Indicator Dengan Javascript

by
Cara Membuat Scroll Bar Indicator Dengan Javascript

Pada kali ini saya akan membagikan Tutorial Membuat Scroll Bar Indicator yang bisa kalian gunakan untuk mempercantik tampilan situs / web kalian tentunya untuk kode yang saya bagikan cukup mudah untuk dipahami dan ada penejelasan disetiap kodenya.

Untuk kalian yang ingin melihat seperti apa Scroll Bar Indicator tersebut, kalian bisa langsung lihat tampilannya dibawah ini atau previewnya.

See the Pen
Scroll Bar Indicator by Rian_kuno (@rian_kuno)
on CodePen.

Oke langsung saja ke tutorialnya

Membuat Scroll Bar Indicator

Pertama kalian buat index.html dulu dengan Teks Editor

Jika sudah lanjut buat Tag div seperti dibawah ini

<div id="progress"></div>

Lanjut tambahkan cssnya untuk menampilkan Bar Indicatornya. Kalian copy kode dibawah ini dan paste pada kode

        #progress{
            height: 3px;
            background:lightblue;
            position: fixed;
            top: 0;
            left: 0;
        }

Sekarang kita tambahkan Javascript agar kodenya jalan

Kalian copy kode dibawah dan simpan tepat pada kota

        $(window).scroll(function(){
            var scroll = $(window).scrollTop(),
                panjang     = $(document).height(),
                panjangwindow     = $(window).height();
                value  = (scroll / (panjang-panjangwindow)) * 100;
                $('#progress').css('width', value + '%');

        })

Ohh iya, sebelumnya jika kode diatas tidak jalan kalian harus pasang JQuery nya

Copy kode berikut dan paste tepat diatas kode </head> or </body>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

Leave a Comment