wp-content Β» themes Β» functions.php Β» How to add πŸ“œ Scroll Percentage to WordPress without any plugin

How to add πŸ“œ Scroll Percentage to WordPress without any plugin

In this guide I will be adding a scroll percentage to a WordPress page. For a working demo please check this page.

image 16 - How to add 📜 Scroll Percentage to WordPress without any plugin

First step is to add the HTML code that will display the scroll percentage number inside the page or theme header. in this example I’m adding it to a single post and for that I use the HTML gutenberg block.

image 15 - How to add 📜 Scroll Percentage to WordPress without any plugin

code:

<p id="scrollPercentLabel">Scroll Percentage: <span>0</span>%</p>

For the working part we need to include the following JS code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<script>
$(document).ready(function() {

				$(window).scroll(function(e){
					var scrollTop = $(window).scrollTop();
					var docHeight = $(document).height();
					var winHeight = $(window).height();
					var scrollPercent = (scrollTop) / (docHeight - winHeight);
					var scrollPercentRounded = Math.round(scrollPercent*100);

				    $('#scrollPercentLabel>span').html(scrollPercentRounded);
				    repositionLabel();
				});
	   
				$(window).resize(function(){
					repositionLabel();
				});

				function repositionLabel() {
					$('#scrollPercentLabel').css({
						position:'fixed',
						left: ($(window).width() - $('#scrollPercentLabel').outerWidth()) / 2,
						top: (($(window).height() - $('#scrollPercentLabel').outerHeight()) / 2) - $('#scrollPercentLabel').height()
					});
				}

				repositionLabel();

			});

</script>

This script uses an older version of jQuery than WordPress, which could create issues if your theme uses some of the newer features.
So, when you’ve included this code, double-check that everything is working on your website.

To add this code to your website you can either edit the functions.php file of your active theme or use a plugin such as Insert Headers and Footers.

image 18 - How to add 📜 Scroll Percentage to WordPress without any plugin


This step is optional and use it only if you want to add custom style to the Scroll Percentage text, for example to change it from this:

See also  Display all Active WordPress plugins
image 19 - How to add 📜 Scroll Percentage to WordPress without any plugin
to this:
image 16 - How to add 📜 Scroll Percentage to WordPress without any plugin

use the following css code:

#scrollPercentLabel {
	font-family: Impact;
	font-size: 50px;
	color: #2B2B2B;
	background: rgba(255, 255, 255, 0.5);
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	box-shadow: 8px 8px 5px rgba(20, 20, 20, 1);
	border-radius: 15px;
	}

The easiest way to add css in WordPress is the built-in Customizer > Additional CSS

image 20 - How to add 📜 Scroll Percentage to WordPress without any plugin

Was this post helpful?

Leave a Comment

I enjoy constructive responses and professional comments to my posts, and invite anyone to comment or link to my site.

Recommended