FF IE10+ Chrome

jQuery Page Scroll Progress Bar

Author: Dynamic Drive

Description: If your page is really long, visitors can feel like they're in a never ending tunnel as they scroll the page. Well, this compact jQuery script adds a sleek progress bar to either the top or bottom of the page to give your visitors a better sense of how far they are along the page as they scroll up and down.  As a bonus, clicking on the progress bar takes the user to the position on the page where the user clicked.

CSS3 3D transform is used to animate the progress bar to maximize performance. As such the script works only in modern browsers, with IE9 and below seeing nothing.

Demo: Scroll the page and look at the bottom of the window to see the progress bar.


Directions: Developer's View

Step 1: Simply add the below script to the <HEAD> section of your page:

Select All

And that's it!

Important Note: In order for the progress bar to work correctly on mobile browsers, your page should contain a valid mobile meta tag in the HEAD section:
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

As simple as the script is, many aspects of it can still be customized. Inside the CSS, you can modify the following:

  • The position of the progress bar- whether to appear at the top or bottom (default is bottom)

  • The background color and default height of the progress bar

  • Whether the progress bar should animate into its new position whenever the user scrolls the page, or simply reflect that instantly. Default is animated.

Inside the script, the first line lets you specify whether clicking on the progress bar should take the user to that location on the page, and if so, whether to enlarge the progress bar when the user mouses over it to more easily click on it:

var growmouseover = [true, '25px'] // magnify progress bar onmouseover? [Boolean, newheight]

And that's a wrap!

End of Instructions

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post