效果：点击导航跳转到网页指定位置，滚动网页导航切换焦点；
知识点：锚点连接，scrollTop，offset
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>锚点连接</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#menu {
width: 800px;
margin: 0 auto;
padding: 20px;
}
#menu li {
border: 1px solid #ccc;
margin-bottom: 10px;
}
#list {
/*标记:让fixed元素贴靠另一个元素*/
position: fixed;
top: 100px;
left: 50%;
margin-left: 400px;
width: 80px;
}
#list li a {
text-decoration: none;
color: green;
display: block;
padding: 5px 10px;
text-align: center;
}
#list li a.sel {
color: red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<ul id="list">
<li class="sel">
<a class="sel" href="#item0">0F</a>
</li>
<li>
<a href="#item1">1F</a>
</li>
<li>
<a href="#item2">2F</a>
</li>
<li>
<a href="#item3">3F</a>
</li>
<li>
<a href="#item4">4F</a>
</li>
</ul>
<ul id="menu">
<li id="item0" class="item">
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
</li>
<li id="item1" class="item">
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
</li>
<li id="item2" class="item">
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
</li>
<li id="item3" class="item">
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
</li>
<li id="item4" class="item">
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
<p>娜美</p>
</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
var domScrollTop = $(document).scrollTop(),
$menu = $("#menu"),
$items = $menu.find(".item"),
currentId = ""; //滚动条现在所在位置的item id
$items.each(function() {
var _this = $(this);
if(domScrollTop > _this.offset().top - 200) {
currentId = "#" + _this.attr("id");
} else {
return false;
}
});
var currentLink = $('#list').find(".sel");
if(currentId && currentLink.attr("href") != currentId) {
currentLink.removeClass("sel");
$('#list').find("[href=" + currentId + "]").addClass("sel");
}
});
});
</script>
</html>
1373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
