*Cara Membuat Persentase pada Scrollbar dengan CSS di Blog*

WEPKU | Cara Membuat Persentase pada Scrollbar - Tutorial kali ini sebenarnya tidak terlalu penting bagi sebuah blog, namun bagi sahabat yang ingin membuat blognya lebih unik, tidak ada salahnya untuk mencoba menerapkan persentase pada scrollbar ini. Pada postingan sebelum nya juga di jelaskan Bagaimana Cara Merubah Warna Scroll Bar dengan CSS di blog

A
Dengan menambahkan persentase, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%.

 

Untuk membuatnya silahkan ikuti langkah-langkahnya :

Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. Simpan kode ini di atas ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

Langkah 2 : Simpan kode ini di bawah </head>

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

Langkah 3 : Simpan JavaScript ini di atas </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(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Simpan Template.

Sekian dan Terima Kasih

Posted by Warung Nasi Goreng

Tweet