Home
thủ-thuật-blog

Code đếm phần trăm tại thanh cuộn dọc khi scroll mouse

#them % khi cuon trang, #scroll mouse, #hien thi % tai thanh cuon doc, #phan tram
Để thêm hiệu ứng khi bạn scroll mouse số % sẽ hiển thị bên cạnh thanh cuộn dọc, bạn thêm đoạn code sau vào trước thẻ </body>. 
<!--open hiển thị số % tại thanh cuộn dọc khi scrol mouse-->
<style>
#scroll{display:none;position:fixed;top:0;right:20px;z-index:500;padding:3px 8px;background-color:#2187e7;color:#fff;border-radius:3px}
#scroll:after{content:" ";position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;border:4px solid transparent;border-left-color:#2187e7}
</style>
<div id='scroll'/>
<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>
<!--close hiển thị số % tại thanh cuộn dọc khi scrol mouse-->
Sau khi nhấn Lưu, bạn quay ra blog nhấn phím F5 để xem kết quả!.