Wordpress

Scroll progress indicator for blog post

Scroll progress indicator for blog post

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.
    
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' );

Leave a Reply

Your email address will not be published. Required fields are marked *