Cara Membuat ScrollBar Keren dengan Persentase di Blog

Scrollbar - merupakan alat gulir atau bar yang dapat menggulung layar secara horizontal maupun vertikal. Pada saat ini Hack4rt akan memberikan cara Membuat ScrollBar Keren dengan Persentase di Blog dengan mudah. Pada saat ini scrollbar yang akan diberikan angka persentase yaitu scrollbar yang menggulung layar secara vertikal atau ke atas dan ke bawah layar. Berikut tutorialnya

CSS

Letakkan kode berikut tepat di atas ></b:skin>

#scroll {
display: none;
position: fixed;
top: 0;
right: 10px;
z-index: 500;
padding: 3px 8px;
background-color:#1e598e;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -7px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: rgb(139, 175, 28);
}
@media screen and (max-width:600px){
#scroll{
display:none;
}

Javascript

Letakkan kode berikut tepat 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>