Today I am going to share a quick tutorial on how to make a scroll indicator with Javascript. I like to use this effect to show the user how far down a page they have scrolled. Have you ever wondered how some websites create that effect where a colorful bar moves across the top of the page as you scroll?
This is a pretty cool scroll indicator JavaScript effect you can add to your longer pages to give the reader an indication of how far down the page they have scrolled.
Let’s get into it!
Scroll Indicator JavaScript: Setting Up Our HTML
Let’s start by setting up our HTML using the proper semantic tags. Our code will be divided into three chunks—HTML, CSS, and JavaScript. We will work on the structure of the page using HTML first.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header class="header">
<h2>Scroll Indicator</h2>
<div class="scroll-container">
<div class="scroll-indicator" id="thisPartMoves"></div>
</div>
</header>
<section class="content">
<h3>Let's make a scroll indicator</h3>
Put your paragraphs here. Make sure you put lots of content so you can scroll.
Try a Lorem Ipsum generator if you can't think of anything yet!
</section>
</body>
</html>
As you can see, we have used some HTML best practices and have the structure of our page figured out. Notice the “scroll-indicator” class with an id of “thisPartMoves.” We’ll target this element later with JavaScript to bring it to life.
For now, just make sure you fill your page with plenty of content to enable scrolling. If you need a lot of text in a pinch, try a free Lorem Ipsum generator.
Styling Our JavaScript Scroll Indicator With CSS
The next step is to add some styles using CSS. This step is just as crucial as JavaScript and HTML.
body {
margin: 0; /*fixes the margin on the left*/
font-size: 2em; /*makes the font big enough to see*/
font-family: sans-serif; /*style the font a little*/
}
.header {
position: fixed;/*make the header follow you*/
top: 0; /*make the header stick to the very top with no space left over*/
z-index: 1;/*make the header always on top*/
width: 100%;/*make the header take up full width of its container*/
background: url(https://images.unsplash.com/photo-1557672172-298e090bd0f1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size: cover;/*set a cool image from unsplash and set the size to cover*/
}
.header h2 {
text-align: center;
color: #fff;
text-shadow: black 1px 5px 12px;/*make the text centered and pop from the background, do whatever tho*/
}
.scroll-container {
width: 100%;/*make the scroll container where the indicator will live--take up full width just like header*/
height: 1.5rem; /*set the height of scroll indicator container*/
background: #f1d6e3;/*set background of indicator container*/
}
.scroll-indicator {
height: 1.5rem;/*match the size to its parent*/
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);/*gradient background on indicator*/
width: 0%;/*make the indicator take up 0% by default until JS code changes it*/
}
.content {
padding: 100px 0;/*give more padding to the top so the header doesn't cover first bit of content*/
margin: 3rem auto; /*3rem margin on the top and auto on every other side for the text*/
width: 80%;
}I’ve added some CSS comments to explain what each line does. As you can see, each line makes a slight difference in the final appearance of our page.
Play around with the styles to make them your own. If you want to change the background image in the “.header,” just link to a different URL or use a solid color or gradient. Don’t change the “position: fixed” property, as this is vital for the effect to work.
If you try your code at this point, you’ll notice nothing works yet. Let’s start making this interactive.
Making Everything Work With JavaScript
JavaScript is the lifeblood of this project. Before jumping into JavaScript frameworks or relying on libraries like jQuery, a solid knowledge of Vanilla JavaScript will help you build more advanced projects.
Let’s start small. The first thing we’re going to put within our script tag is a scroll trigger to execute our function:
window.onscroll = function() {scrollFunction()};Once this is done, we can start creating our function. We’ll name it scrollFunction, and within it, we’ll place a few variables as shown:
function scrollFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("thisPartMoves").style.width = scrolled + "%";
}The first variable, winScroll, will get the number of pixels that an element is scrolled vertically.
The next variable, height, is just as important since it returns the viewport’s height.
Finally, we create a variable named “Scrolled” and use this to change the CSS width attribute of the id by dividing the winScroll variable by the height variable. The value is applied to the corresponding ID using the getElementById method.
Scroll Indicator JavaScript: Final Thoughts
Like you, I’m a lifelong learner of web development and coding. If you want to know where I learned how to make this, check out W3Schools. They have a lot of cool free stuff to help you learn!
You can use JavaScript used for all sorts of things, like making a sticky header, animations, and effects. Keep practicing, and you will soon be crafting extraordinary things.
If you want to improve your skills, keep tweaking this project and making it better. There are certainly ways to make it faster and more efficient. Feel free to leave a comment if you find anything to share or if you have any questions.
