scrollgress

Add to favorites

May 17, 2016

Scrollgress | A jQuery plugin to display a progress bar at the top

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.

Created by Michael Lynch

Download
Home
Example

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.');
        }
    });

});

Related posts:

To install using Bower
bower install scrollgress

https://jqueryplug.in/wp-content/uploads/2016/04/Scrollgress.jpg

jQuery plugin