The progressScroll jquery plugin

progressScroll adds a helpful and stylish horizontal scroll bar to the top of articles. Especially useful for long form articles, it allows the reader to understand how far they are through reading an article. Also helpful, progressScroll picks up all the tags along the way and presents them in the scroll bar.

progressScroll is customizable to fit in with the look and feel of your site. Everything from font family and size to the color and thickness of the scroll bar can be changed.

Adding progressScroll to your site

Simple

Simply add the jquery.progressScroll.js and jquery.progressScroll.css to your project. Remember to add a script tag for the .js file and a link tag for the .css file in your html and the latest version of jquery.

Once everything is set up all you have to do in your main javascript file is select the element for which the scroll bar will be used and append .progressScroll()

Then add the above html directly above the div you want the scroll bar for

With customization

If the default progressScroll doesn't quite fit with the look and feel of your site you can change that.

By adding any or all of the options available in the above picture you can change the color, font, width and whether the headings even appear at all.

Options
backgroundColor
height
textArea
font
fontSize
headings

Description
Sets the scrolling bar color. Any valid color type will be accepted
Sets the height of the scrolling bar
Switch between 'dark' or 'light' text area above the scrolling bar {light|dark}
Choose a font family for the headings
Choose the size of the font for the headings
Choose whether you want the headings to appear or not. Options {true|false}

Default
#009ACF
5px
dark
sans-serif
20
true

Get the plugin

Get it at GitHub or download it right here

Download GitHub

Contribute

You can help make this plugin even better by forking the code, adding new features, submitting a pull request and sharing it on Twitter.

Fork it on GitHub

jquery.progressScroll.js

Get in touch

Keep Scrolling!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis cumque, fugit facilis molestiae modi illo consequuntur sint, voluptate, unde dignissimos voluptates quia dolorum. Rerum aliquam fugit repudiandae architecto ipsam at tempora obcaecati, animi consectetur, suscipit quisquam sunt nemo est doloremque perferendis dolore harum quis aperiam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime accusamus fugiat nobis eveniet nihil sunt, odit ipsam animi esse quidem sint suscipit ea nulla deserunt, non dolorum minima culpa, illum temporibus necessitatibus obcaecati ex facere veritatis eius numquam. Laborum eligendi, hic error reprehenderit dolore sequi pariatur ut labore animi nihil tempore dignissimos placeat sit doloribus provident, cupiditate quam ducimus quibusdam et. Repellendus dolorum doloremque sunt placeat, explicabo consectetur repellat debitis magni officiis ad cupiditate, numquam blanditiis nihil itaque quae amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum a deserunt voluptate! Velit voluptatibus quae reiciendis hic soluta corrupti ipsum, numquam eligendi alias quo fuga ab. Accusantium, quis saepe, doloremque sunt delectus reiciendis nesciunt tenetur distinctio, similique voluptate, assumenda facilis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde odit voluptatem accusamus natus est quibusdam ipsam, voluptas ullam error, quas magni voluptatum sed quo nesciunt eligendi ad quidem asperiores dolor ab saepe commodi! Odit, cum sint quam qui quas numquam possimus eos, perspiciatis quidem magnam!

Sub-heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptates amet voluptas qui, ipsa dicta suscipit explicabo a! Ut expedita eum laborum praesentium numquam molestiae, aliquid repellendus ullam tempora? Modi!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dolorum dolorem dolor iusto provident in consectetur nisi non. Mollitia velit asperiores ad facere assumenda soluta vero architecto, veritatis repellat iusto nam eum blanditiis quaerat reiciendis, veniam ab accusantium ea iure. Itaque aspernatur natus ad architecto repudiandae alias, quidem animi. Expedita, accusantium tempora at vero unde quod rerum quidem nemo ipsa magnam beatae id ipsam tenetur praesentium modi iure similique facilis sint fugiat minus, harum ipsum illo. Qui molestiae tempore quasi officiis sint excepturi unde expedita consequuntur fuga temporibus, in perferendis laboriosam eaque repudiandae dolore. Saepe nostrum unde, odio fugit perspiciatis.

progressScroll