JavaScript Page Scroll Indicator

JavaScript Page Scroll Indicator

When we visit a landing page website and keep scrolling down, we see an element called a scroll indicator on some websites. It is a visual element informing a user about their current position on that page. That is, how far they have scrolled on the landing page website or how much content they have viewed. This is usually a bar or line that increases as you scroll and decreases as you scroll up. Today we will share with you such a horizontal page scroll indicator snippet. The video below shows the process of making it. Before collecting the source code, watching the video once will help you understand the code. Moreover, we have many more videos about Frontend on our YouTube channel. If you are new to frontend development then you can subscribe to our channel.

Video Tutorial:

Hope you have watched the video tutorial above. A page scroll indicator helps to understand the length or depth of any website's content. By seeing this visual element animate, a user can estimate how much content is left to explore or how far they've already scrolled. Overall, this element improves the user experience by giving users a sense of progress while exploring the web pages of a website. We used HTML, CSS, and a bit of JavaScript to create this horizontal page scroll indicator, which you can see in the video above.

You May Also Like:

JavaScript Page Scroll Indicator [ Source Code ]:

To create this page scroll indicator you will need to create an HTML, a CSS, and a JS file. After you've copied the code, paste it into the corresponding file. If you save the code, you can open the project in the browser. If the code is malfunctioning, then you can download it from below.

ADD HTML:

<!DOCTYPE html>
<!-- divinectorweb.com -->
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Page Scroll Indicator</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      
      <h2>Page Scroll Indicator</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque provident ullam blanditiis libero quod aspernatur beatae, dolore soluta corporis, incidunt magnam nam enim delectus alias eos esse eum quidem sequi fugit dicta accusantium asperiores aperiam cum in. Unde, nesciunt a, maiores veritatis blanditiis impedit minus, consequuntur velit illo tempore aliquam mollitia vitae deleniti numquam voluptatum? Sint tempora, consequatur minus repellendus, doloribus numquam ab illo fugiat necessitatibus voluptates mollitia dolor doloremque animi nobis nihil voluptatem voluptatum nam. Non ab adipisci veniam a delectus sint error quia similique facilis facere enim omnis cumque, doloribus voluptatem magnam harum suscipit necessitatibus incidunt dolorem dignissimos ea doloremque possimus. Fuga amet voluptas ducimus. Perspiciatis aliquid vero, dolore molestias vel laudantium architecto, delectus at quos reiciendis tempora distinctio nam itaque saepe illum nihil, consectetur corporis? Illum doloremque soluta officiis excepturi tempore necessitatibus numquam similique modi repellendus quod unde ipsa, ipsam inventore voluptatum ab ut facilis magni accusantium iste rem. Temporibus veritatis consequatur itaque deleniti aperiam perspiciatis nisi inventore saepe aspernatur, ea expedita voluptatum veniam pariatur unde dolorem cum quae in sed consectetur quas, odio repellat nesciunt quidem. Assumenda, quasi ipsam obcaecati neque deleniti porro pariatur maxime sint beatae expedita, suscipit vero consequatur? Vel blanditiis mollitia sunt temporibus itaque laboriosam quos soluta beatae, nemo nihil similique laborum sint distinctio molestiae, tempore labore veniam dolor dignissimos fugiat dicta libero, ab quo? Quis, et magnam ea deleniti necessitatibus cupiditate vel ipsum eligendi tenetur impedit eum dolores, aspernatur suscipit laborum ducimus accusantium eveniet tempore esse, quia illum fuga quo deserunt architecto sapiente? Esse quas mollitia placeat hic labore obcaecati sunt enim. Accusantium fugiat veritatis architecto unde voluptate. Sed distinctio facilis voluptatibus! Voluptas, qui similique. Veritatis cum non odit soluta nihil, consequatur eaque ipsa ipsam nobis error quis eligendi voluptas vel, neque labore perferendis officia culpa facere. Pariatur doloribus quia, temporibus voluptatum alias, placeat minus reiciendis repudiandae distinctio delectus accusantium maxime sunt vel cumque cum dolor nihil! Repudiandae eligendi sapiente, error sed incidunt esse, labore quia ratione eos quos totam magnam sint quidem tempora explicabo, eveniet commodi est nemo consectetur earum dicta sunt nam. Enim aspernatur distinctio, earum animi unde delectus eaque, dolore, vero veritatis nulla sunt repudiandae? Perspiciatis error nostrum ea est porro et illo facere exercitationem, explicabo nulla vel harum accusamus. Explicabo, ducimus nesciunt labore sunt ipsum qui ut velit sint et modi distinctio, ex eos earum iusto numquam consequatur sed. Alias modi adipisci ipsa delectus fugit aspernatur veritatis illum voluptas voluptate! Ipsum maxime eaque necessitatibus aspernatur veniam officia. Dignissimos magni minima distinctio quaerat? Facilis, fugit sint ipsam praesentium libero quo iste, maiores enim quis sequi molestiae sapiente ex fugiat excepturi laboriosam aut autem? Nihil dolorum laboriosam delectus. Neque dolores repellat beatae consequatur nemo. Excepturi quam facere quisquam iure odio unde, dolorum iusto beatae esse quo ea nobis tempore, pariatur distinctio quae dolor reiciendis. Perspiciatis iusto adipisci dignissimos ut fugit itaque hic tempora totam dicta quisquam, soluta tenetur! A, esse libero illum eos voluptatum modi doloremque perspiciatis! Debitis ea eius doloribus repellat. Ipsam doloribus recusandae nobis repellat laudantium numquam deleniti. Nam, dolorem? Eaque atque ea quod, id modi, itaque dolor libero unde recusandae alias architecto odit sapiente ducimus facere voluptatem ullam molestiae voluptates beatae. Eveniet explicabo consequatur dolorem. Omnis voluptatum, debitis accusamus, soluta temporibus cum dignissimos placeat illum voluptatibus recusandae minima molestiae similique totam alias. Sequi vel quidem tempora quae! Dolor laboriosam qui, maxime ea provident et accusamus culpa asperiores optio mollitia quibusdam accusantium distinctio sapiente quo. Ab recusandae exercitationem sint earum ducimus et cupiditate eius deserunt odit nemo voluptatum vero enim commodi, repudiandae illo hic! Reprehenderit eum est, ipsum nobis quia ipsa aliquid eos et, magnam quaerat rem officiis maxime delectus debitis dolorem totam dignissimos placeat deserunt! Error, aspernatur similique. Sit harum corporis eos eius at nesciunt, facilis perferendis modi voluptate aperiam vero! Maxime aliquid neque asperiores a eaque minus, aperiam in quas ex ipsam facere ipsa delectus magnam iste, nesciunt similique? Nulla mollitia quis quia eveniet possimus consequuntur magnam libero laboriosam sit pariatur dolore qui, laudantium atque voluptatibus obcaecati delectus! Ipsum suscipit enim odit molestias ratione vel vitae? Consectetur debitis modi dolorum aliquam commodi optio porro facilis eaque aspernatur ut cupiditate voluptatum perspiciatis sit omnis, quas nostrum placeat sint harum ducimus molestias totam quidem corporis nesciunt! Libero voluptas accusamus earum molestiae hic veniam culpa aspernatur nobis sit quidem. Ullam, aperiam! Minima eveniet non voluptate dignissimos numquam esse quidem quas consectetur accusantium cum. Quae provident illo necessitatibus in recusandae ea placeat nemo asperiores optio explicabo itaque aut soluta labore officiis veniam doloribus, iusto saepe rerum expedita temporibus ad! Nesciunt voluptatem earum totam expedita ut magnam itaque incidunt corrupti mollitia, dolorum temporibus quos non ipsam obcaecati iste inventore aliquid sed maiores quasi atque, veniam repudiandae accusamus. Officiis quos sed nam ex similique fugit amet quae ea illum accusantium, rerum, debitis modi inventore voluptatum. Adipisci voluptates distinctio dolorem eaque illum qui quibusdam impedit dolore ab reiciendis! Maiores voluptatibus optio deserunt eligendi nostrum reprehenderit quam, natus corporis officiis eum earum sapiente architecto deleniti quos, blanditiis dignissimos voluptate dicta magnam culpa ducimus dolores doloremque. Nobis, odio aliquam. Dignissimos nesciunt, sit veniam exercitationem distinctio fugiat harum reprehenderit aliquam? Voluptate eligendi in pariatur adipisci ipsum ex quis earum quae vel dolorem eveniet facilis velit magni dicta reiciendis, suscipit cum quibusdam provident debitis, laborum culpa esse ratione? Cupiditate voluptates, aliquid laboriosam eum magni illo error, impedit praesentium unde rem sit beatae quo iure ipsa necessitatibus velit sed dignissimos ipsum quam, eaque veritatis voluptatibus? Quasi omnis ullam beatae eveniet, enim distinctio alias molestiae, molestias, at voluptatem totam! Minima impedit molestiae deleniti, fuga quos voluptas enim nobis veniam quidem voluptatibus illum sit iste! Minima illo veniam architecto voluptate et rerum ipsum corporis, odio nostrum voluptatem maiores delectus saepe unde! Doloremque voluptatibus velit eos sint, ad sapiente quas non corporis fuga. Sint fugiat, maxime id dicta excepturi in distinctio minus provident quis accusantium blanditiis facilis voluptatem, dolor perferendis, recusandae quasi impedit deleniti veritatis expedita. Corporis suscipit ratione odio voluptatum delectus exercitationem deserunt vero magnam voluptatibus est? Voluptatem sed, saepe tempora numquam sit, aperiam nam incidunt eius harum quasi consequuntur?</p>

      </div>
    <div class="line">
      <div class="progress"></div>  
    </div>

    <script>
      let indicator = document.querySelector(".line .progress");
let scrollHeight =
  document.documentElement.scrollHeight - document.documentElement.clientHeight; 

window.addEventListener("scroll", scroll); 

function scroll() {
  let scrollTop = document.documentElement.scrollTop;
  let scrolled = (scrollTop / scrollHeight) * 100;
  indicator.style.width = `${scrolled}%`;
}

    </script>
  </body>
</html>

ADD CSS:

* {
  margin: 0;
  padding: 0; 
}

body {
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
  background: #203936;
}

.wrapper {
  padding: 64px;
}
.wrapper h2 {
	-webkit-text-stroke: 2px #fff;
	-webkit-text-fill-color: transparent;
	text-align: center;
	margin-bottom: 30px;
	font-size: 100px;
}
.wrapper p{
  color: #fff;
  line-height: 2;
  text-align: justify;
}

.line {
	height: 15px;
	width: calc(100% - 64px);
	position: fixed;
	top: 15px;
	left: 30px;
}

.line .progress {
  height: 100%;
  width: 0;
  border-radius: 25px;
  background: coral;
  transition: width 0.1s;
}

We wish the code is working for you. We would suggest you click on the Load More button at the bottom of our homepage to explore more like this snippet. If you have benefited from the contents of our website, please feel free to share. Thank you for the visit.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box