Cara Mudah Membuat Indikator Gulir Atau Scroll Pada Website atau Blog

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
4
Cara Mudah Membuat Indikator Gulir Atau Scroll Pada Website atau Blog
Hi Web Developer! kembali lagi bersama dengan guru design. kali ini guru design akan berbagi Tutorial Cara Membuat Indikator Gulir Atau Scroll. Buat para master dan sejenisnya silahkan di koreksi kalau saja ada yang kurang tepat, tapi saya rasa tidak ada dan buat para newbie yang membutuhkan pencerahan silahkan di ikuti dan di praktikan di komputer masing-masing. Ok lanjut ketutorial.

Kita  harus tau dulu tombol gulir itu apa? tombol gulir adalah tombol yang digunakan untuk menaikan atau menurunkan halaman, supaya lebih jelas lihat gambar berikut:

gulir

Jadi di sini kita akan membuat indikator pada samping tombol tersebut yang berguna untuk mengetahui berapa % halaman tersebut digulir, supaya lebih jelas kita bisa lihat gambar indikator gulir berikut:
indicator


Ok lanjut ke tutorialnya,
  1. Tambahkan kode HTML berikut setelah body pembuka <body> pada website atau blog anda.
    <div id='scrollindicator'></div>
  2. Tambahkan kode JavaScript berikut sebelum body penutup </body> pada website atau blog anda.
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> 
<script type='text/javascript'>
    //<![CDATA[
    var scrollTimer = null;
    $(window).scroll(function() {
       var viewportHeight = $(this).height(),
           scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
           progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
           distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scrollindicator').height() / 2;
        $('#scrollindicator')
            .css('top', distance)
            .text(' (' + Math.round(progress * 100) + '%)')
            .fadeIn(100);
        if (scrollTimer !== null) {
            clearTimeout(scrollTimer);
        }
        scrollTimer = setTimeout(function() {
            $('#scrollindicator').fadeOut();
        }, 1500);
    });
   //]]>
</script>
  3. Tambahkan kode CSS berikut pada style website atau blog anda.
    /* indikator scroll */
#scrollindicator {display: none;position: fixed;top: 0;right: 20px;z-index:500;padding:3px 8px;background:rgb(1, 148, 60);color: #fff;border-radius:3px;}
#scrollindicator:after{content: " ";position: absolute;top: 50%;right: -8px;height: 0;width: 0;margin-top: -4px;border: 4px solid transparent;border-left-color: rgb(1, 148, 60);}
  4. Terahir simpan.

Result
Sekian semoga bermanfaat terimakasih.
    Rafiqi, S.Kom.