Back To Blog

Creating A Page Scroll Percentage Bar

1227 Words October 23 9 minutes To Read 389

There are many different ways to implement a page scroll indicator into a website, although I will be showing a method that relies solely on HTML, CSS and jQuery.

Having a feature like this on your webpage might seem fairly pointless, which to an extent it is, however, having this feature can be integrated into design to make a webpage look better and provides a little bit of satisfaction for your users when on your page. The scroll indicator can also be built upon and include tags at certain points of a page which you can see working here, I might cover this in another blog post in the future.

Page Scroll Percentage Bar Broken Down:

  • Create div and div container elements
  • Style divs in a way that is helpful
  • Set div width to a calculated page scroll percentage




Creating The Elements

Before anything else add this script tag into your <head></head> tags. This will allow you to write JavaScript with the help of jQuery making this process faster and will likely be used many times again on your site.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


Now add this HTML snippet anywhere in your body tags, it doesn’t really matter where since we are going to be setting the containers position as fixed anyway.

<div id="scrollContainer">
    <div id="scrollBar"></div>
    <div id="scrollPercent">0</div>
</div>




Styling The Elements

If you load up your HTML page there won't exactly be anything interesting other than a 0. To make the bar look better we need to add some CSS code. This scroll indicator will be a vertical one just like the one on this page. In your CSS file or internal tags add this code and I’ll explain it in a second.

#scrollContainer{
    position: fixed;
    top: 20px;
    left: 20px;
    height: calc(100% - 40px);
    width: 5px;
    background-color: #ddd;
}

If you are familiar with CSS you will instantly know what this means and can just skip these explainer parts which will be highlighted with a info symbol, for everyone else I’ll run through it. The div #scrollContainer is has been set to position: fixed; so that the container will stay on the screen at all times in the position that we set using the top and left property, setting them both to 20px means that the container will be located 20 pixels from the top and the left of the screen. We then set the height to 100% of the window and then take away 40px to account for the extra 20px we put in the top value and to give us a bit of space at the bottom.

You can change up the width and background colour tags to whatever you think fits best, I’m going for a smaller hidden design that’s not too distracting but you can make yours how you wish. After adding this and refreshing your page you should see the container that will hold a bar that fills up when you scroll.

Now add this CSS code:

#scrollBar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #222;
}

Because the elements parent is set to fixed, we can set this shell of what will be out scroll indicator to absolute and then set it to top: 0, left: 0, and width: 100%. We do this so that the shell will be ready to change its height and fit into its parent element. We also set the background colour for this element as darker than its parent so that scrolling is clear. The final CSS part is for the scroll percentage text, the text is optional so you can remove the "#scrollPercent" div if you don't like the feature.

#scrollPercent{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

This is similar to before but instead of setting it to the top of the parent we set it to the very bottom using top: 100%. The last 2 attributes make it so that it is in the exact centre of the parent, this method isn't recommended but it is quicker for absolute elements and is suitable in our case. It works by setting the numbers left offset equal to 50% of the parent container and then moving the number back 50% of its own width, making it centred.

Here's the final copy and pastable CSS code that goes into your <style></style> tags or external stylesheet.

#scrollContainer{
    position: fixed;
    top: 20px;
    left: 20px;
    height: calc(100% - 40px);
    width: 5px;
    background-color: #ddd;
}
#scrollBar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #222;
}
#scrollPercent{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}




Adding Interactivity To The Elements

$(function(){
    $(window).scroll(function(){
        //CODE GOES HERE
    });
});

Adding this code to your script will execute whatever is where the //CODE GOES HERE is every time the user scrolls or drags the window scrollbar.

We need to work out what percentage of the page the user has scrolled down, to do this we use this simple statement:

scrollPercentage = $(window).scrollTop() / ($(document).height() - $(window).height()) * 100;

This sets the variable "scrollPercentage" equal to the number of pixels hidden from view above the scrollable area which is the divided by the full document height - the window size (which we then multiply by 100 to give us a range from 0 to 100). The next line is simpler and is getting the HTML element "#scrollBar" and then setting its height to whatever the scrollPercentage variable is equal to, concatenated with a percentage sign.

$("#scrollBar").height(Math.round(scrollPercentage) + "%");

That’s basically it for the scroll bar part, if you reload your page you should see the bar working, although if you have no scrollable content and are just on a blank page add <div style="margin: 9000px 0px"></div> somewhere you your page to test the scrolling.

For everyone that wanted the number percent, you may notice that the number is staying at zero no matter where you scroll, one line of code will fix that and it’s as simple as:

$("#scrollPercent").html(Math.round(scrollPercentage) + "%");

This simply sets the innerHTML of the element to the scroll percentage, if yours isn’t working, here is the full JavaScript which you can compare yours to.

$(function(){
    $(window).scroll(function(){
        scrollPercentage = $(window).scrollTop() / ($(document).height() - $(window).height()) * 100;
        $("#scrollBar").height(Math.round(scrollPercentage) + "%");
        $("#scrollPercent").html(Math.round(scrollPercentage) + "%");
    });
});

If it still isn't working, make sure that you have jQuery installed in the head tags of your page. As you might notice the scrolling can be a little jagged, this depends on your mouse, settings and browser but someone who uses your site is bound to have a really sensitive mouse making the scroll indicator look bad, to fix this, add to your #scrollBar the line of CSS transition: 0.1s;. Reload the page and test your new scroll indicator.




HTML

<div id="scrollContainer">
    <div id="scrollBar"></div>
    <div id="scrollPercent">0</div>
</div>


CSS

#scrollContainer{
    position: fixed;
    top: 20px;
    left: 20px;
    height: calc(100% - 40px);
    width: 5px;
    background-color: #ddd;
}
#scrollBar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #222;
}
#scrollPercent{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}


JavaScript

$(function(){
    $(window).scroll(function(){
        scrollPercentage = $(window).scrollTop() / ($(document).height() - $(window).height()) * 100;
        $("#scrollBar").height(Math.round(scrollPercentage) + "%");
        $("#scrollPercent").html(Math.round(scrollPercentage) + "%");
    });
});

Recent Posts

Creating A Page Scroll Percentage Bar

July 24