Home
Scrollbar - merupakan alat gulir atau bar yang dapat menggulung layar
secara horizontal maupun vertikal. Pada saat ini AKBAR_BARRU 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'/>
Anda baru saja membaca artikel yang berkategori Blogger
dengan judul Membuat ScrollBar Keren dengan Persentase di Blog. Anda bisa bookmark halaman ini dengan URL http://akbar-barru.blogspot.com/2013/07/membuat-scrollbar-keren-dengan.html. Terima kasih!
Ditulis oleh:
Unknown - Sabtu, 27 Juli 2013
Belum ada komentar untuk "Membuat ScrollBar Keren dengan Persentase di Blog"