Skip to content
A jQuery plugin. Create a scroll line bar indicator on the page.
Branch: master
Clone or download
Latest commit e2677b5 Dec 12, 2014
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Publish scrolline.js Dec 12, 2014


A jQuery plugin. Create a scroll line bar indicator on the page.



Basic Usage

Include scrolline.js file in the page, along with jQuery.

<script src="js/jquery.js"></script>
<script src="js/scrolline.js"></script>

Then call $.scrolline(); to launch the plugin.


You can apply a set of optional options:

  • backColor - Define the color of back's scrolline (default '#ecf0f1')
  • direction - Can be vertical or horizontal (default 'horizontal')
  • frontColor - Define the color of front's scrolline (default '#2ecc71')
  • opacity - Define alpha's scrolline, value must be between 0 and 1 (default 1)
  • position - Define the position of scrolline : top and bottom for horizontal's position, left or right for vertical's position (default top in horizontal and left in vertical)
  • reverse - Revert the front line sens on set value at true (default false)
  • weight - Define the larger of scrolline on pixels (default 5)
  • zindex - Change the z-index value if needed (default 10)
  • scrollEnd - Callback's function call at the end of scrolling


Scrolline revert with custom color at bottom position:

    reverse : true,
    position : 'bottom',
    backColor : '#2980b9',
    frontColor : '#f1c40f',
    weight : 12

Scrolline vertical at right position with callback:

    position : 'right',
    direction : 'vertical',
    weight : 30,
    scrollEnd : function() {
		alert('End of scroll!');


  • Safari
  • Firefox
  • Chrome
  • IE
  • Safari mobile



Anthony Ly, on twitter @Pik_at


Licence MIT

You can’t perform that action at this time.