<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>滑动锚点</title>
<script type="text/javascript"src="/js/jquery-1.7.1.min.js"></script>
</head>
<body>
<form id="form1"runat="server">
<!--head-->
<div class="head">
<div class="container">
<a href="#">
<div class="logo"></div>
</a>
<ul id="navbar"class="nav">
<li class="active"><a href="#home">页首</a></li>
<li><a href="#features">特色功能</a></li>
<li><a href="#newFeatures">新功能</a></li>
<li><a href="#support">服务</a></li>
</ul>
</div>
</div>
<!--banner-->
<div id="home"class="banner">
<div class="img"></div>
</div>
<!--content-->
<div id="features">
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="support">
<br/><br/><br/><br/><br/><br/>
</div>
<script>
$(function() {
$('#navbar a').click(function() {
varelementClicked = $(this).attr("href");
vardestination = $(elementClicked).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination - 65 }, 500);
returnfalse;
});
$(window).scroll(function() {
varpreTop = document.documentElement.clientHeight;
$.each($('#navbar a'),function() {
varelement = $(this).attr("href");
varscrollTop = $(this).offset().top;
varheight = $(element).offset().top + $(element).height();
varoffsetTop = height - scrollTop;
if(offsetTop > 75) {
$(this).parent('li').addClass('active').siblings('li').removeClass('active');
returnfalse;
}
});
});
});
functionskip(data) {
$('#support dl').each(function(index, element) {
if(index == data) {
varoffsetTop = $(element).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: offsetTop - 75 }, 500);
returnfalse;
}
});
}
</script>
</form>
</body>
</html>
注：需要引用js文件（<script type="text/javascript"src="/js/jquery-1.7.1.min.js"></script>）
js脚本中75标示菜单栏的高度，减去75标示滑动到这个位置就停止
