Scroll Progress Bar

Scroll down the page to see the green progress bar fill across the top. You can also click or drag the bar to jump to any position on the page.

How It Works

The thin bar fixed at the top of the viewport listens to the window's scroll event. As you scroll, JavaScript calculates how far you've traveled as a percentage of the total scrollable height, then sets the bar's width accordingly.

Dragging is supported too — press and hold anywhere on the bar, then slide left or right to scrub through the page like a seek bar. On mobile, touch events are handled the same way.

Section Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras vehicula, mi eget laoreet venenatis, erat lacus mattis ligula, nec laoreet nisi elit sit amet tortor.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.

Section Three

Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Donec eget arcu bibendum nunc consequat lacinia. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Section Four

Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.

Section Five

Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ut facilisis in, egestas eget quam.

The End

You've reached the bottom — the progress bar should now be at 100%. Try dragging it back to the left to jump to the top!