Bằng cách thêm vào tỷ lệ này không chỉ là trang trí ngoài ra giúp blog sẽ có thể nhìn thấy tỷ lệ phần trăm khi di chuyển, nếu nó đã đạt đến dưới cùng của trang sau đó tỷ lệ này sẽ là 100%. Đầu tiên bạn lưu mã sau đoạn
]]></b:skin>
hoặc </style>
dán đoạn code sau thẻ
#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;
}
</head>
Và đoạn sau
<div id='scroll'></div>
</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>
Không có nhận xét nào: