This is a fairly simple thing to get done once you know how.
At the time that I first encountered this, I was very curious as to how this would work and how I would go about implementing this.
So here is what I did
First, I had to determine how far I had scrolled & how far I still needed to scroll to reach the end of the page.
To do this I added a function that would use either the document.docmentElement or the document.body depending on which had a value.
Then a little bit of math
I then did a calculation in shorthand which is hard to read so I will write it out a bit better here.
(document.documentElement.scrollTop || document.body.scrollTop) / (document.documentElement.scrollHeight|| document.body.scrollHeight) - document.documentElement.clientHeight) * 100;
This is not much of an improvement over the Codepen version, but it is a lot more readable.
How & when should I trigger this function
I added an event listener on the scroll on the window & that would then trigger the final function to either show or hide the scroll to the top indicator.
The event listener I added looks like this:
window.addEventListener("scroll", function() {
const svgElement = document.getElementsByClassName('progress-circle')[0]
svgElement.firstElementChild.style["stroke-dashoffset"] = percentage(getScrollPercent(), 307.919);
}, false)
As seen here the final function would return a number that I can then use to set the stroke-dashoffset of the SVG, sure that makes sense.
soooooo what is the 307.919 for?
Well, I don't know, if someone reading this does know and can explain it in more Layman's terms, please leave a comment and I will adjust this part and you will have my thanks.
The way I go to this is just playing around with the values and this worked without issue so I kept it in.
This function would then go on to take these two values and do a calculation to determine if the page has been scrolled and by how much compared to the total available y-axis to scroll.
var t = totalValue - (totalValue * (percent / 100));
If this resulting number is larger than 0 but smaller than 306, then the indicator will come into view in the bottom right-hand corner.
Otherwise, it will fade away.
Finishing touches
All I really had to do now was to make everything comically large so that nothing was missed.
Add in a simple animation or two.
Last but not least, to make the page scroll to the top nice and smooth once the indicator has been clicked & here is how I did that:
document.getElementById('wrap').addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
Codepen Below
Please feel free to go through the Codepen below, check the code, and play around. This was more a proof of concept to satisfy my curiosity and I would advise a lot of testing before using this in a production environment.
Top comments (0)