Cara Memasang Presentase Pada Scrollbar

Hello, sobat kali ini ane mau share tutorial nih, Cara Memasang Presentase Pada Scrollbar walaupun sebenarnya presentase ini tidak penting mungkin bagi anda yang suka design atau ingin memperbagus tampilan bisa memasang tools ini.

Gambar 1.0

wokehh langsungsaja kita masuk ke konfigurasi nya :
1. Masuk ke Menu Edit HTML > lalu masukkan kode dibawah ini sebelum </style> atau ]]></b:skin>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
} 

2. kemudian masukkan kode untuk pemanggil nya tepat di bawah </head>

<div id='scroll'></div>

3. masukkan kembali kode dibawah ini tepat diatas </body>

<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 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

okk ke.mudian simpan template dan lihat hasilnya, selamat mencoba terimakasih.

Share this post