Scroll progress indicator for blog post

Share with friends

Facebook Twitter LinkedIn whatsapp

urlshr

Copy Link

Bookmark

A scroll progress indicator is a visual cue on a webpage that shows how far a user has scrolled down a page. It’s typically a bar, line, or percentage that appears on the side or top of the page and moves as the user scrolls. The code bellow, adds a scroll progress indicator on the top of the single post page

why you need a scroll progress indicator in your blog you ask?

1. Improves user experience: A scroll progress indicator helps users navigate long articles and pages more easily. By showing them how far they’ve scrolled and how much more is left, they can better manage their time and know when to expect the end of the content. This can improve their overall experience on your website.
2. Encourages engagement: When users see how much content is left to read, they may be more likely to continue scrolling to the end. This can increase engagement with your content and reduce bounce rates.

    

      Copy
      
    
    
      
function add_scroll_top_bar() {
    if (is_single()) {
        echo '<div class="scroll-top-bar"><div class="scroll-progress"></div></div>';
        echo '<style>
            .scroll-top-bar {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 8px;
                background-color: #ffffff00;
                z-index: 9999;
            }
            .scroll-progress {
                height: 100%;
                width: 0;
                background-color: #5479f5;
            }
        </style>';
        echo '<script>
    var scrollBar = document.querySelector(".scroll-progress");

    window.addEventListener("scroll", function() {
        requestAnimationFrame(function() {
            var windowHeight = window.innerHeight;
            var documentHeight = document.body.offsetHeight;
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            var scrollHeight = documentHeight - windowHeight;
            var scrollPercentage = Math.floor((scrollTop / scrollHeight) * 100);
            scrollBar.style.width = scrollPercentage + "%";
        });
    });

    // Add CSS transition for smoother animation
    scrollBar.style.transition = "width 0.1s ease-out";
</script>';
    }
}
add_action( 'wp_footer', 'add_scroll_top_bar' );    
    

	
How to use this
	
      Copy