Hiển Thị Phần Trăm Khi Cuộn Trang Blogger

Mọi Bài Đăng Đều Được Viết Bởi Admin Nguyễn Tỉnh, Vui Lòng Ghi Nguồn Khi Copy Bài Đăng Từ Trang Này!

Hôm qua mình có chia sẻ trên J2TEAM Community về cái Template của mình , có bạn NEO NGUYEN đã hỏi mình về cách làm hiện phần trăm khi cuộn trang , cho nên hôm nay mình sẽ hướng dẫn các bạn để có thanh cuộn trang theo ý muốn.

Đầu tiên , các bạn chép đoạn css sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

Tiếp theo các bạn tiếp tục dán đoạn html sau vào trước thẻ đóng </head>

<div id='scroll'></div>

Sau đó lại tiếp tục chép đoạn javascript sau và chép nó vào trước thẻ đóng </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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>