Scrollbar - merupakan alat gulir atau bar yang dapat menggulung layar secara horizontal maupun vertikal. Pada saat ini Saya 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'/>
.gif "Bisnis Online")
