jQuery Table of Contents with Reading Progress Indicators

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.