Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggregation Enquires Welcome

Example Interest Rates: Home Loan Variable: 2.54% (2.74%*) • Home Loan Fixed: 3.74% (3.48%*) • Fixed: 2.48% (2.94%*) • Variable: 2.54% (2.74%*) • Investment IO: 2.3% (3.76%*) • Investment PI: 2.04% (3.8%*)

Show A Page Scroll Progress Bar In 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.

1
<?php 
2
/*
3
 Show A Page Scroll Progress Bar In WordPress
4
 https://www.beliefmedia.com.au/scroll-progress-bar
5
*/
6
 
7
8
?>
9
  %lt;script>
10
  window.onscroll = function() { myFunction() };
11
  function myFunction() {
12
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
13
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
14
    var scrolled = (winScroll / height) * 100;
15
    document.getElementById("bm-progress-scroll").style.width = scrolled + "%";
16
  }
17
  </script>
18
  <?php
19
}
20
add_action('wp_head', 'beliefmedia_page_scroll_indicator_js', 999);
21
 
22
 
23
 
24
25
?>
26
  
27
 
28
<div style="width: 100%; height: 4px; background: #ccc; position: fixed; bottom: 0; z-index: 995;">
29
<div id="bm-progress-scroll" style="height: 4px; background: #FFB301; width: 0%;"></div>
30
</p></div><?php
31
}
32
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.

  AUS Eastern Standard Time (Connecticut)

  Want to have a chat?
 

RELATED READING

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment