Memasang Persentase Pada Scrollbar

Memasang Persentase Pada Scrollbar - Postingan selanjutnya mengenai cara memasang fungsi persentase pada scrollbar blog. Mungkin anda pernah melihat fungsi persentase ini di blog lain.

Sebenarnya persentase scrollbar ini bukan fitur yang penting bagi sebuah blog. Namun tidak ada salahnya untuk dicoba, itupun tergantung selera masing-masing.

Dengan menambahkan persentase ini bukan hanya sebagai hiasan blog semata tetapi pengunjung akan dapat melihat berapa persen halaman yang telah Ia scroll, apabila telah hingga di bawah halaman maka nilai persentase akan menjadi 100%.

Cara penerapannya pun cukup mudah, silahkan ikuti langkah-langkah sederhana berikut ini :


Pertama, simpan isyarat di bawah sempurna di atas ]]></b:skin> atau </style>

#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; }

Selanjutnya, simpan isyarat pemanggilnya di bawah  </head>

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

Simpan isyarat di bawah ini sempurna 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(600);     if (scrollTimer !== null) {         clearTimeout(scrollTimer);     }     scrollTimer = setTimeout(function() {         $('#scroll').fadeOut(600);     }, 1000); }); //]]> </script>

Kemudian simpan Template dan lihat hasilnya.

See the Pen Persentase Pada Scrollbar by (@arlinadesign) on CodePen.

Jika langkah-langkah yang anda lakukan tidak salah, maka blog anda seharusnya sudah ada persentase di samping scrollbar.

Cukup gampang bukan. Selamat mencoba.

Source :

Tweet

Subscribe to receive free email updates: