Page Scroll Progress
Nay chia sẻ đến Anh Chị Em Page Scroll Progress sử dụng Html/Css/jQuery.

Hay còn gọi là hiệu ứng tiến trình cuộn trang cực đẹp luôn. Để người dùng có thể nhận biết đã scroll được bao nhiêu nội dung trên 1 trang rồi.
Code này mình đã code trong dự án Studio và nhiều người ưng ý nên nay share cho mọi người dùng!
Ok bắt đầu thôi. Đầu tiên là tạo mới 1 khối Html như dưới , code này bỏ vào function.php nè.
add_action('wp_footer', 'isures_2718_page_scroll_progress');
function isures_2718_page_scroll_progress()
{
?>
<!-- -->
<div class="isures-wrap--progress">
<div class="progress"></div>
</div>
<?php
}
1 vài dòng jQuery để xử lý scroll
jQuery(document).ready(function () {
var pixels = jQuery(document).scrollTop();
var pageHeight = jQuery(document).height() - jQuery(window).height();
var progress = 100 * pixels / pageHeight;
jQuery("div.progress").css("width", progress + "%");
});
jQuery(document).on("scroll", function () {
var pixels = jQuery(document).scrollTop();
var pageHeight = jQuery(document).height() - jQuery(window).height();
var progress = 100 * pixels / pageHeight;
jQuery("div.progress").css("width", progress + "%");
});
Làm đẹp nó bằng 1 ít Css thôi.
.isures-wrap--progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
height: 1px;
background-color: rgba(255, 255, 255, 0.51);
z-index: 1024;
}
.isures-wrap--progress .progress {
position: absolute;
left: 0;
top: -1.5px;
transition: all linear 100ms;
height: 5px;
min-width: 1%;
background-color: red; /* đổi màu thanh progress */
border-radius: 0 99px 99px 0
}
Thật đơn giản đúng không nào! Nhưng thành quả mang lại thì khỏi bàn luôn. <3 Chúc thành công ạ!
All code bỏ vào function.php nếu không biết bỏ từng code vào đâu
add_action('wp_footer', 'isures_2718_page_scroll_progress');
function isures_2718_page_scroll_progress()
{
?>
<!-- -->
<div class="isures-wrap--progress">
<div class="progress"></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
var pixels = jQuery(document).scrollTop();
var pageHeight = jQuery(document).height() - jQuery(window).height();
var progress = 100 * pixels / pageHeight;
jQuery("div.progress").css("width", progress + "%");
});
jQuery(document).on("scroll", function () {
var pixels = jQuery(document).scrollTop();
var pageHeight = jQuery(document).height() - jQuery(window).height();
var progress = 100 * pixels / pageHeight;
jQuery("div.progress").css("width", progress + "%");
});
</script>
<style>
.isures-wrap--progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
height: 1px;
background-color: rgba(255, 255, 255, 0.51);
z-index: 1024;
}
.isures-wrap--progress .progress {
position: absolute;
left: 0;
top: -1.5px;
transition: all linear 100ms;
height: 5px;
min-width: 1%;
background-color: red; /* đổi màu thanh progress */
border-radius: 0 99px 99px 0
}
</style>
<?php
}