Blog, WordPress

Show A Page Scroll Progress Bar In WordPress

There's valid psychology that validates the notion that if we provide an individual of progress required to complete a task, they're far more likely to complete it. This principle is the motivation for progress bars on forms to indicate what effort is required for completion... and they work.

WordPress themes now come with shortcode that'll render circular (or other) progress bars on your website for no good reasons other than fancy-pants exhibitionism and it annoys us to no end - don't use them unless they serve a purpose.

One style of progress bar that we believe is truly beneficial is a page scroll progress bar to indicate a page reading position with relation to the end of a document. The indicator creates a 'temporal expectancy' and give us motivation to scroll through to completion (for a little dopamine rush, apparently).

In this article we'll show you how to create the most basic of scroll-bars fixed to the footer of your WordPress website. To see the effect, scroll down on this page. We're building our own full-featured solution for our client area and this was the first example we played with (this code isn't overly efficient). However, the code works well and navigates the complexities often associated with incorporating this feature.

The vanilla JavaScript is prone to various errors that will be overcome with our next article that provides a jQuery solution that abstracts the complexities associated with various browsers and scrolling conditions. Our newer function (which uses the progress tag simply because it's semantically accurate) will make its way into a client function shortly.

The height, color, and background color of the progress bar may all be altered to your liking.

The Code

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Show A Page Scroll Progress Bar In WordPress

https://www.beliefmedia.com.au/scroll-progress-bar

function beliefmedia_page_scroll_indicator_js() {

%lt;script>

window.onscroll = function() { myFunction() };

function myFunction() {

var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var scrolled = (winScroll / height) * 100;

document.getElementById("bm-progress-scroll").style.width = scrolled + "%";

}

</script>

<?php

}

add_action('wp_head', 'beliefmedia_page_scroll_indicator_js', 999);

function beliefmedia_page_scroll_indicator() {

</p></div><?php

}

add_action('wp_footer', 'beliefmedia_page_scroll_indicator', 999);

Considerations

We use inline styling for the progress bar. You'll likely want to alter the height of the scrollbar, background (resting color), and scoll background color (inner div).
Set the scrollbar to the top of your page by changing bottom: 0; to top: 0;.;
See also: "Add a Fixed (Floating) Footer or Header Bar in WordPress in One Line of Code".
If you have a long footer height, consider factoring this into your window height calculation to have it excluded.

Download

Title: Show A Page Scroll Progress Bar In WordPress
Description: Show A Page Scroll Progress Bar In WordPress. Customise the size and color of the progress indicator.
Download • Version 0.1, 628.0B, zip, Category: WordPress Shortcodes

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.