JQ 自动生成目录和点击跳转固定位置
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<style>
.t-container{}
.t-container h3{ line-height: 2em;}
.t-container p{ height: 1000px;}
.fix-smallnav{ background: #f60; color: #fff; width: 100px; position: fixed; top: 200px; left: 0px;}
.fix-smallnav li{ padding-left: 8px; line-height: 2em;}
</style>
</head>
<body>
<div class="t-container g-w" id="container">
<h3>列表一</h3>
<p></p>
<h3>列表二</h3>
<p></p>
<h3>列表三</h3>
<p></p>
<h3>列表四</h3>
<p></p>
<h3>列表五</h3>
<p></p>
</div>
<ul class="fix-smallnav" id="smallnav"></ul>
<script>
$(function(){
var subtit = $("#container h3");
var smallnav = $("#smallnav");
for(var i=0;i<subtit.size();i++){
smallnav.append("<li>"+subtit.eq(i).text()+"</li>");
}
$("#smallnav li").click(function(){
$('html, body').animate({
scrollTop: subtit.eq($(this).index()).offset().top
},600);
});
})
</script>
</body>
</html>
效果图：