创建博文目录

content.html

<div id="content">
  <div id="content-nav">目录</div>
  <div class="content-core">
    <p>文章正文</p>
    <h2>小标题</h2>
    <p>dddd</p>
  </div>
</div>

create catalog.js

jQuery(document).ready(function(){
  var content = jQuery(".content_core h2, .content_core h3, .content_core h4");
	if(content.length && jQuery(window).width() > 1300){
		var toc = "<p>文章目录</p><dl>";
		for(var i=0;i<content.length;i++){
			if(content.eq(i)[0].tagName == "H2"){
				toc += "<dt name='#h2-"+i+"'>"+content.eq(i).html()+"</dt>";
				content.eq(i).attr("id","h2-"+i);
			}
			if(content.eq(i)[0].tagName == "H3"){
				toc += "<dd name='#h3-"+i+"' class='toc-h3'>"+content.eq(i).html()+"</dd>";
				content.eq(i).attr("id","h3-"+i);
			}
			if(content.eq(i)[0].tagName == "H4"){
				toc += "<dd name='#h3-"+i+"' class='toc-h4'>"+content.eq(i).html()+"</dd>";
				content.eq(i).attr("id","h3-"+i);
			}
		}
		toc += "</dl>";
		var smartNav = function(){
		var offset = jQuery("#content-nav").offset();
		jQuery(window).scroll(function(){
			if(jQuery(window).scrollTop() > offset.top){
				jQuery("#content-nav").stop().animate({marginTop:jQuery(window).scrollTop()-offset.top+15});
			} else {
				jQuery("#content-nav").stop().animate({marginTop:0});
			}
		});
		}
		
		jQuery("#content-nav").height(jQuery(window).height()-20);
		jQuery("#content-nav").empty().append(toc).show();
		smartNav();
		jQuery("#content-nav dt, #content-nav dd").click(function(){
			var name = jQuery(this).attr("name");
			jQuery("html,body").animate({scrollTop: jQuery(name).offset().top}); 
		});
	}
});

style.css

#content{width:960px; margin:0 auto; padding-top:5px;background-color:#fff;position:relative;}
#content-nav{width:180px;min-height:100px;color:#ccc; position:absolute;top:200px;left:-185px;overflow:auto;display:none;}
#content-nav p{font:bold 16px/2 "Hiragino Sans GB","Microsoft Yahei";text-align:center;background:#444;border-top:2px solid #666;}
#content-nav dt{font-weight:bold;margin-top:.5em;}
#content-nav .toc-h3{margin-left:1em;margin-top:.25em;}
#content-nav .toc-h4{margin-left:2em;}
#content-nav dt:hover,
#content-nav dd:hover{color:#fff;cursor:pointer;}