28/12/2017

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ẻ ]]></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



- - 66 bình luận CHUYÊN MỤC

BÌNH LUẬN (66)

  1. Hữu ích :3 Bài viết ngắn gọn nhưng chỉ cần thế là đủ :v

    Trả lờiXóa
  2. cảm ơn nhé người anh em , đang cần cái này :D

    Trả lờiXóa
  3. Ê :v xin link fb
    - tt đặt lại liên kết <3

    Trả lờiXóa
  4. Trả lời
    1. E kiểm tra ở đâu mà biết a ở quảng bình hay vậy

      Xóa
    2. nhấn vào Hùng Coder là có thông tin. mà em cũng Quảng Bình nè anh

      Xóa
  5. khổ lỗi con chuột lăn bị hỏng :))))

    Trả lờiXóa

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé