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

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
}

add_action('wp_footer', 'isures_2718_page_scroll_progress');

function isures_2718_page_scroll_progress()

{

</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 + "%");
});

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
}

.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
}

add_action('wp_footer', 'isures_2718_page_scroll_progress');

function isures_2718_page_scroll_progress()

{

</div>

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

}

Nguồn https://thietkewebgiarehcm.com/page-scroll-progress/

Flatsome

Page Scroll Progress

Trả lời Hủy

Trả lời Hủy

Đăng ký nhận báo giá & khuyến mãi

Đăng nhập