JQ 自动生成目录和点击跳转固定位置

最新推荐文章于 2022-05-07 10:21:48 发布

iteye_17658

最新推荐文章于 2022-05-07 10:21:48 发布

阅读量571

点赞数

分类专栏：境-JS 文章标签：点击跳转固定位置 JQ点击跳转固定位置跳转固定位置

境-JS 专栏收录该内容

197 篇文章 1 订阅

订阅专栏

<!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>

效果图：