exTOC.js 1.0 sample3

Overview

• TOCの前に任意のHTMLを追加（目次）
• H3〜H4に限定してTOCに表示
• H3の後ろにTOCへの移動リンクを追加(スクロールアップ時のスムージングのためのコード追加)

Source

Code

<script src="../lib/jquery/jquery-1.3.2.min.js"></script>
<script src="../lib/exjquery/extoc_1_0.js"></script>
....
<script>
jQuery(function($){
	var toc = $('#toc').exTOC({
		headFrom : 3,
		headTo : 4,
		numbering : true,
		numberingHead: false,
		insertMethod : 'append',
	});
	toc.getTOC().before('<b>目次</b>')    
        $('h3').append(' <a href="#toc" class="return">▲</a>');
});

jQuery(function($){
   $('a[href^=#]').click(function() {
      var speed = 400;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

CSS

<style>
.return {
	font-size:80%;
	text-decoration:none;
}

/* ex-toc design */
ul.ex-toc {
	border: 1px dotted #000
}
ul.ex-toc li {
	list-style: none
}
ul.ex-toc li a {
	text-decoration: none;
}
ul.ex-toc span.ex-toc-label {
	margin-right: 4px;
}
</style>

jQuery

ver 1.2.6

text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text

ver 1.3.0

text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text

Example

text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text