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
}

5/5 - (100 bình chọn)

Bài viết liên quan