A simple, lightweight jQuery plugin used to display a progress bar at the top of the page that fills up as the user scrolls.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
demo
src
.gitignore
LICENSE.md
README.md
bower.json
package.json
scrollgress.jquery.json

README.md

Scrollgress

Inspired by Pitchfork, Scrollgress is a simple, lightweight jQuery plugin used to display a progress bar at the top of the page that fills up as the user scrolls.

Progress can be measured as the user scrolls the page or an element that has
overflow: scroll | auto or overflow-y: scroll | auto.

See a demo

See a demo using an overflow element

Instructions

Include jQuery and the plugin in the head or footer of your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="/js/plugins/scrollgress.js"></script>

Initialize the plugin targeting the class, ID or element that you want to display the scroll progress of.

$('body').scrollgress();

Options

  1. height: "Npx"
    A string that defines the height of the progress bar in pixels (default: '5px').
  2. color: color
    A string that defines the color of the progress bar (default: '#ff0000').
  3. success: function()
    A callback function that runs after scrollgress has been initiated (default: function()).
  4. complete: function()
    A callback function that runs after you've reached the end of the page (default: function()).
Example:
$(function() {

	$('.post').scrollgress({
		height: '10px',
		color: '#990000',
		success: function() {
			console.log('Scrollgress has been initiated.');
		}
	});

});