TOC-style Catalog Generator Plugin For jQuery - anchorScroll

File Size: 15.1 KB
Views Total: 1164
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
TOC-style Catalog Generator Plugin For jQuery - anchorScroll

anchorScroll is a small yet useful jQuery plugin used to automatically generate a TOC(table of contents)-like side catalog for your long documents. The plugin walks through your heading elements and auto builds anchor links and IDs that can be used to navigate between content selections on click.

How to use it:

1. Create a container element to place the generated anchor links.

<div class="nav_list" id="catalog"></div>

2. Add heading elements at the beginning of each section of content:

<div id="main">
  <h2>Headling 1</h2>
    Content 1
  <h2>Headling 2</h2>
    Content 2
  <h2>Heading 3</h2>
  <h3>Heading 3.1</h3>
    Content 3.1
  <h3>Heading 3.2</h3>
  <ul>
    Content 3.2
  </ul>
  <h3>Heading 3.3</h3>
    Content 3.3
  <h2>Headling 4</h2>
    Content 4
  ...
</div>

3. Include jQuery JavaScript library and the anchorScroll.js script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/anchorScroll.js"></script>

4. Initialize the plugin.

$.anchorScroll('#main', '#catalog');

5. Apply the following CSS styles to the generated anchor links.

.nav_list dl {
  position: relative;
  margin-top: 0;
}

.nav_list dl:before {
  display: inline-block;
  height: -moz-calc(100% - 19px);
  height: -webkit-calc(100% - 19px);
  height: calc(100% - 19px);
  margin-top: 9px;
  content: "";
  width: 2px;
  position: absolute;
  left: -18px;
  background-color: #e1e1e1;
}

.nav_list dl dd.cate-item1 {
  font-size: 16px;
  font-weight: bold;
  color: #0e337a;
  line-height: 30px;
}

.nav_list dl dd { position: relative; }

.nav_list dl dd.cate-item1:before {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  left: -23px;
  top: 9px;
  background: url(img/jgsz_left_line-22.png) no-repeat center;
}

.nav_list dl dd.cate-item1 a {
  display: block;
  color: #0e337a;
}

.nav_list dl dd.cate-item1.active:before {
  display: block;
  content: "";
  width: 16px;
  height: 10px;
  background: url(img/jgsz_left_line_active.png) no-repeat;
  position: absolute;
  left: -23px;
  top: 10px;
}

.nav_list dl dd.cate-item2 {
  font-size: 14px;
  color: #555555;
  line-height: 30px;
  position: relative;
}

.nav_list dl dd.cate-item2:before {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  left: -23px;
  top: 9px;
  background: url(img/jgsz_left_line-11.png) no-repeat center;
}

.nav_list dl dd.cate-item2 a { color: #555555; }

.nav_list dl dd.cate-item2.active:before {
  display: block;
  content: "";
  width: 16px;
  height: 10px;
  background: url(img/jgsz_left_line_active.png) no-repeat;
  position: absolute;
  left: -23px;
  top: 10px;
}

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