Trang chủ Blog Website Share Code Page Scroll Progress

Page Scroll Progress

Page scroll progress

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

Page scroll progress
Page scroll progress

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