Get new jQuery plugins just once a week

×

scrollgress

FavoriteLoadingAdd 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

Example

Scrollgress jQuery plugin

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()).
Example:
$(function() {

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

});
scrollgress

Related posts:

Scroll Path
Stellar-js
scrollSpeed

To install using Bower
bower install scrollgress

Scrollgress jQuery plugin

http://jquer.in/wp-content/uploads/2016/04/Scrollgress.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever