Hello readers, today in this blog you will learn how to create a page scroll down indicator line using HTML CSS and JavaScript. I have shared menu bars on many navigations before and some of them are responsive and some are not. But the page scroll indicator line has no features. So now it's time to create a page scroll pointer using JavaScript.
You may have seen a top progress bar for displaying scroll information on many websites that indicates page scroll status. A scroll indicator is a line that fills in based on how much the user has scrolled up or down. These are usually placed at the top of the page or at the bottom of the navigation bar
Today on this blog, I will share this program with you (page scroll down indicator line). First, the pointer line is hidden. But when we scroll down the indicator line starts to show. This pointer line starts on the left side of the webpage and starts at the bottom of the navigator which is filled in blue.
If you find it difficult to understand what I mean. You can watch a full video tutorial on this program (page scroll down indicator line).
If you like this program (page scroll down indicator line) and want to get the source code. You can easily get the source code of this program. All you have to do is scroll down to get the source code. You can use this program on your projects and websites. If you have some knowledge of HTML CSS and JavaScript, you can customize this guide line to suit your project requirements.
Page scroll down indicator line [source code]
To create this program. First, you need to create two files, one an HTML file and the other a CSS file. After creating these files, paste the following codes into your file. First, create an HTML file named index.html and paste the provided code into your HTML file. Remember, you need to create a file with the .html extension.
<!DOCTYPE html>
<!-- Created By Masud Computer BD -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Page Scroll Down Indicator</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<nav>
<label> MCBD <span> Studio </span></label>
<div class="scroll-line"></div>
</nav>
<div class="content">
<h2 class="header">
Page Scroll Down Indicator Line
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia autem nemo repellat molestiae et, harum cupiditate provident earum, in inventore quos expedita cumque neque, beatae molestias? Accusamus quis blanditiis explicabo perspiciatis consequuntur molestiae velit nemo? Sunt beatae similique molestiae ratione, amet numquam natus nemo. Non dicta corrupti tempore veritatis, at maxime, fuga dolores provident quae possimus magnam quisquam nesciunt neque. Dolores similique voluptatem voluptates sed, non porro veniam ut nam. Totam iste nulla, optio excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt eos, voluptas id quia animi, officiis ratione impedit neque sit facere eius! Repellat dolorem, odit minus modi ea excepturi optio voluptate illo officia, deleniti eveniet maxime quidem molestias sunt magnam earum veritatis eligendi beatae quae perferendis magni quaerat! Minus laudantium quia, incidunt voluptas quae rerum quidem ipsum in amet earum aut tempore reprehenderit animi sapiente voluptatibus soluta placeat nihil voluptatum impedit veritatis cumque vero. Omnis, magni!
</p>
<h2>
Dashboard Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<h2>
About Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<h2>
Portfolio Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<h2>
Blog Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<h2>
Services Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<h2>
Contact Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<center>
"You've reached bottom of the page"
</center>
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var windowTop = $(window).scrollTop(),
documentHeight = $(document).height(),
windowHeight = $(window).height();
var scroll = (windowTop / (documentHeight - windowHeight))*100;
$('.scroll-line').css("width", (scroll + '%'));
});
});
</script>
</body>
</html>
That’s all, now you’ve successfully created a Page Scroll Down Indicator Line in HTML CSS & JavaScript. If your code does not work or you’ve faced any error / problem then please comment down or contact us from the contact page.
ডোমেইন হোস্টিং সার্ভিস এই লিংকে চাপ দিন ।
ওয়েব ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।
গ্রাফিক্স ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।
ডোমেইন চেকার এই লিংকে চাপ দিন ।
