Cuộn trang hiện thị phần trăm - cross show %
Nhiều khi bạn không biết vài này hoặc page này còn dài nữa không mà cứ kéo kéo thì lâu quá. hoặc là đang dọc dở muốn đọc cố mà ko biết còn dai không thì dùng code này rất hợp lýdemo:
![code - [Code] Cuộn trang hiện thị phần trăm - cross show % DZDm4nH](https://i.imgur.com/DZDm4nH.jpg)
Tìm
Code:
</head>Code:
<div id='scroll'></div>
<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>
<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;
}
</style>Tags: #code #blogger
