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>
HTML
Letakkan kode berikut tepat di bawah <body><div id='scroll'/>