Obviously, to use this configuration - you must have installed System - Top of the Page. The link itself is created by the plugin, what I'm describing here is only a method to style, and add additional functionality (the progress indicator).
Beginning with plugin configuration. There are a few items here that are location specific. I chose bottom right display, but you could choose any of the displays understanding that a few of these class names will need to be changed based on that choice. I'm not going to detail every minute change, but simply explain what's going on and why it would need to be changed. It's up to you to determine what your site needs.
Let's get started.
Plugin Configuration
Button Tab
Beginning with the Button tab of the plugin, there are 2 fields to concern yourself with, and these determine the look and placement of the button.
Button Class
mb-2 me-2
This is the location specific change I was talking about. Because I chose to put the button on the bottom right, I added these two classes to space it off the bottom (mb-2 is Margin-Bottom) and the right side (me-2 is Margin-End) just a bit. If you chose bottom left placement, you might choose ms-2 (Margin-Start) instead of me-2 (Margin-End).
Each of the locations offered by the plugin (top left/middle/right, and bottom left/middle/right) will probably require some tweaking to get it in just the right position. The Bootstrap margin classes will help you out a lot here.
Boostrap Spacing Docs: https://getbootstrap.com/docs/5.1/utilities/spacing/#notation
Icon
fa fa-arrow-circle-up fa-3x text-success
Again, this is entirely up to you for the style of your site. The first 3 classes set the icon and the size, and the last sets the color to green. You might want to use the upward pointing finger (fa fa-hand-point-up) for your button. For the purposes of this document, I'm going to suggest you use what I used, and customize it later.
FontAwesome Icons: https://fontawesome.com/search?ic=free
Boostrap Text Colors: https://getbootstrap.com/docs/5.1/utilities/colors/
CSS Tab
I'm just going to paste the whole config here, and explain just a few lines. What is in bold is something you could change to suit your needs and icon choice. All of the setup for the progress indicator happens here, so let's dive in.
#plg_system_topofthepage{
--progress-color: crimson;
--percentage: 0;
--bg-color: black;
--circle-size: 50px;
--progress-width: 10px;
--inner-color: white;
width:var(--circle-size);
height:var(--circle-size);
border-radius: 50%;
display: flex !important;
justify-content: center;
align-items: center;
background: conic-gradient(var(--progress-color,crimson) calc(var(--percentage,0) * 3.6deg),var(--bg-color,black) 0deg);
border: 1px solid white;
}
#plg_system_topofthepage i{
position:absolute;
width: calc(var(--circle-size) - var(--progress-width));
height: calc(var(--circle-size) - var(--progress-width));
border-radius: 50%;
background-color: var(--inner-color);
font-size:calc(var(--circle-size) - var(--progress-width) + 1px);
line-height: calc(var(--circle-size) - var(--progress-width) + 2px);
}
That looks complicated, but it's pretty straightforward CSS. Mostly, this does the hard work using CSS variables and the calc() function. Calc allows us to make the browser do math for us, otherwise this would be very ugly and difficult.
The items in bold are where you can make this match your site. Let's get colors out of the way - I'm not explaining those here. Pick colors that are good for you, I'm not here to do that.
--circle-size:
This determines the size of your button. It must be larger than --progress-width.
--progress-width:
Do what you want, it must be smaller than --circle-size.
The 1px and 2px bold items at the end:
Those have to do with the alignment of the icon. I pushed mine around a couple of pixels because it looked offset. You might have to do that, depending on which icon you choose.
Why is --percentage: 0; in red?
NO TOUCHY! No touchy. No touch.
It must be present. Don't mess with it.
Lock in those settings!
When you're happy with your indicator style, you could easily transfer these CSS changes into your template CSS file. This is the best practice. If your template has a user.css file - just copy them directly and empty the CSS field of the plugin.
The Progress JavaScript!
This was so silly. I've seen many examples of circular progress meters which use a ridiculous amount of code. 50 lines? 100 lines? Just ridiculous! This is an easy job, don't make it complicated!
If your Joomla template has a user.js file, that's where this should be put. Otherwise, you could use my System - Head Tag plugin to insert it as a public access level script.
window.addEventListener('scroll',function(){
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
var pct = Math.round((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
document.getElementById('plg_system_topofthepage').style.setProperty('--percentage',pct);
});
Simply, on scroll - the script figures out the percentage of scroll and updates the --percentage property of the button.
Ahem, That's 8 Lines - Not 7
Yeah, I noticed that too - after I made the meme. I don't feel like re-making the meme - so I'm just going to own that mistake.
You know what, let's address that. Here you go - one line. It's still wrong, but in the other direction:
window.addEventListener('scroll',function(){var h=document.documentElement,b=document.body,st='scrollTop',sh='scrollHeight';var pct=Math.round((h[st]||b[st])/((h[sh]||b[sh])-h.clientHeight)*100);document.getElementById('plg_system_topofthepage').style.setProperty('--percentage',pct);});
Et voilà!
Progress Indicator in a Top of the Page Button
That’s it—a lightweight, stylish scroll-to-top button with a progress meter. Tweak the colors and size to match your site, and you’re good to go!
If you like the plugin, consider leaving a review for the plugin on the Joomla Extension Directory.
-fin
