jQuery Character Counter & Scroll Position Indicator Plugin - howmuchread

howmuchread is a jQuery plugin that keeps track of the window scroll events and provides two useful functionalities as you scroll down the page:

• Character counter: displays how many characters you've read that auto update on scroll.
• Scroll Position Indicator: indicates your position on the page as you scroll.

How to use:

1. Download and include the jQuery howmuchread plugin after loading jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.howmuchread.js"></script>

2. Initialize the plugin by calling the howmuchread() method on desired container.

$('#container').howmuchread();

3. Customization options with default values.

$('#container').howmuchread({

  // parent container
  parent: this,

  // String or number that determines the position of the character where the character is guessed as scrolled.
  // 'before', 'center', 'after' or number
  baseline: 'before',

  // String or number that determines the position where to be guessed as scrolled.
  // 'before', 'center', 'after', 'scroll' or number
  borderline: 'before',

  // The string used for the id of the wrapper element.
  wrapperId: 'howmuchread-wrapper',
  writingMode: {},

  // If set to true, instead of returning the count of characters, this method returns the metric information of the first character guessed as “not scrolled”. Returned object at least contains following information:
  // top, left, right, bottom, width, height, position
  getMetric: false,

  blacklist: ''
  
});

4. API methods.

// Returns the element's full character count which is compatible with jQuery.howmuchread()
$('#container').howmuchread('getLength');

// Scroll window to the 1000th character of the document
$('body').howmuchread('scrollTo', 1000, {
  parent: window
});

---

This awesome jQuery plugin is developed by hakatashi. For more Advanced Usages, please check the demo page or visit the official website.