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:
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:
Ok lanjut ke tutorialnya,
- Tambahkan kode HTML berikut setelah body pembuka <body> pada website atau blog anda.
<div id='scrollindicator'></div> - 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> - 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);} - Terahir simpan.
Result
Sekian semoga bermanfaat terimakasih.