Cũng như mọi ngày :) cũng lang thang trên J2TEAM Community thấy có blog bác Nguyễn Nam Hồng , có 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ẻ
Tiếp theo các bạn tiếp tục dán đoạn html sau vào trước thẻ đóng
Bây giờ các bạn save tempale lại nhé
]]></b:skin>
trong template.#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>
trong template.<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>
Bây giờ các bạn save tempale lại nhé
Source Code: KID1412 BLOG'S