jQuery Table of Contents with Reading Progress Indicators
File Size: | 8.64 KB |
---|---|
Views Total: | 2086 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An useful & human-friendly jQuery plugin for auto creating a table of contents for your long content page that comes with auto-update scrolling bars to present the progress while reading.
Basic Usage:
1. Include the required toc.scroll.progress.css
file in the head section of your page.
<link href="src/css/toc.scroll.progress.css" rel="stylesheet" type="text/css">
2. Include the jQuery library and jquery.toc.scroll.progress.js
script at the bottom of your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="src/jquery.toc.scroll.progress.js"></script>
3. Create an DIV element to place the table of contents.
<div id="progress"></div>
4. Wrap your main content in the wrapper following the Html structure like this. The plugin will automatically generate titles based on heading tags (Default: <h2>
).
<div class="wrapper"> <section class="chapter"> <h2>Section 1</h2> <p> ... </p> </section> <section class="chapter"> <h2>Section 2</h2> <p> ... </p> </section> <section class="chapter"> <h2>Section 3</h2> <p> ... </p> </section> ... </div>
5. Include the jQuery library and jquery.toc.scroll.progress.js
script at the bottom of your page.
<script type="text/javascript"> $('#progress').tocProgress({ storyElem: '.chapter' }); </script>
6. The CSS to style the table of contents and make it sticky on the left side of your main content.
.wrapper { width: 75%; float: right; } #progress { width: 20%; position: fixed; top: 0; left: 0; font-size: .7em; height: 100%; background: white; padding: 1em 0 0 0; border-right: 1px solid #111; } .toc-storybar { position: relative; border-top: 1px solid gray; } .toc-storybar:last-child { border-bottom: 1px solid gray; margin-bottom: .25em; } .toc-storybar p { text-indent: 0; text-align: left; position: relative; padding: 5%; margin-bottom: 0; margin-top: 0; z-index: 100; } .toc-bar { position: absolute; top: 0; bottom: 0; left: 0; background: lightblue; -webkit-transition: width .2s; -moz-transition: width .2s; -ms-transition: width .2s; -o-transition: width .2s; transition: width .2s; } .toc-top { display: block; text-align: right; margin-right: 1em; } section.chapter { margin-top: 2em; border: 1px solid #ececec; } .toc-title { text-align: center; font-size: 1.2em; font-weight: bold; }
6. Available options.
<script type="text/javascript"> $('#progress').tocProgress({ offsetElem: '.nav-container', storyElem: '.story', barsContainer: 'barsContainer', barClass: 'toc-storybar', headlineSelector: 'h2', topText: 'Back to top' }); </script>
This awesome jQuery plugin is developed by jfitzsimmons2. For more Advanced Usages, please check the demo page or visit the official website.