Live
x
<progress id="progress" class='progress' value="0" max="100"></progress><header> <h1>Welcome to Our Website</h1> </header> <nav> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> </ul> </nav> <section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section><section id="section1"> <h2>Section 1</h2> <p>This is the first section of our long HTML page. You can add your content here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the second section of our long HTML page. You can add more content here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the third section of our long HTML page. You can continue adding content here.</p> </section> <!-- Add more sections as needed --> <footer> <p>© 2023 Your Company. All rights reserved.</p> </footer>
Live
xxxxxxxxxx31
* { box-sizing: border-box;}body { margin: 0; padding: 20px;}.progress { appearance: none; margin: 0; position: fixed; width: 100%; top: 0; left: 0; height: 20px; background-color: #eee;}.progress::progress-bar { background-color: #eee;}.progress::progress-value { background-color: red;}.progress::progress-bar { background-color: red;}
Live
xxxxxxxxxx22
const progressElem = document.querySelector('.progress')const html = document.querySelector('html')const body = document.querySelector('body')function scrollHandler() { const screenHeight = window.innerHeight const scrollY = Math.round(window.scrollY) const maxScreenHeight = html.scrollHeight const howMuchScroll = screenHeight + scrollY const progress = (howMuchScroll / maxScreenHeight) * 100 progressElem.value = progress}scrollHandler()window.addEventListener('scroll', scrollHandler)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.