Hello readers, Today in this blog I will show you how to create a custom page scroll indicator using Javascript. Earlier, you learned to Create a word and character counter.


A scroll Indicator is a bar or line that shows the scroll range based on how much you scrolled the page. When you start scrolling the page the bar start to fill up from left to right. Generally, the scroll indicator is placed at the top of the page.


After going through this blog, you can easily create a custom scroll indicator using Javascript. I have tried to explain it in very simple language and an easy way so that you won’t have to face any problems. As you can see in the above image, the whole background is black and there is some dummy content. At first, I created a div having an ‘indicator’ ID and giving a width of 0% height of 10px, and a gradient background. Width is given 0% because later we will calculate the height of the page and scrolled amount then, according to it we will increase the width.

 

After applying CSS, let’s move toward Javascript. I am using internal Javascript for now but you can use it externally too. At first, I added an event listener that observes the scrolling activity of the whole window and calls the function named “scroll”. Then I created a “scroll” function that will read the total height of the page and the total scrolled height. After that, it will convert the total scrolled amount into percentages and store it in a variable named “scrolled”. At last, I have assigned the scrolled percentage to the width of the “indicator”.

 

 document.getElementById("indicator").style.width = scrolled + "%";

 

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Scroll Indicator in Javascript).


 You Might Also Like

All this design is based on CSS only an indicator is based on JavaScript. If you’re a beginner you can also create this type of scroll indicator. If you like this program (Scroll Indicator in Javascript) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Scroll Indicator in Javascript [Source Codes]

 

To create this program (Scroll Indicator in Javascript). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following code into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Javascript code is also inside the HTML file. Remember, you’ve to create a file with a .html extension.

HTML

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

CSS

That’s all, now you’ve successfully created a scroll indicator using JavaScript. If your code does not work or you’ve faced any errors/problems then please comment down your queries. If you feel this article had helped you, please share it with your friends. If you have any suggestions for me please mention them in the comment below.

Thank You :)

Tags

Post a Comment

Post a Comment

Previous Post Next Post