<div id="Function"> <div > <h2>aa</h2> <ul id="link"> <li><a href="#Function">Function</a></li> <li><a href="#Features">Features</a></li> </ul> </div> <div id="Features" style="position:relative;"> <span style="position:absolute;top:-400px;"> </span> <div><h2>系统特点</h2></div> </div> </div> <script src="assets/js/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#link li a").each(function (a, b) { //找到id为nav的标签下所有li下的a标签 each循环便利所有的a标签 $(b).click(function (a) { //当点击标签时触发 //$(b).mouseenter(function (a) { //当鼠标指针穿过元素时触发mouseenter事件 var b = $(this); //获取触发事件的a标签赋值给b a.preventDefault(); //用于取消事件的默认行为 a = b.attr("href"); //获取当前触发事件a标签的href属性值 a = $(a).offset().top - 400; //获取id为当前a标签href属性值的标签距离顶端的位置 并减去400 (400为.fix_top的高度) $("#link li a").removeClass("on"); //移除所有a标签上的on样式 b.addClass("on"); //给当前a标签添加on样式 $("html, body").animate({ //animate jquery自定义动画效果 scrollTop: a //设置滚动条位置为a的值 }, 1E3) }) }); $(window).scroll(function () { //当滚动滚轮或拖动滚动条时触发时间 var a = $(window).scrollTop(), //scrollTop() 方法返回元素的滚动条的垂直位置 赋值给a b = $("#Function").offset().top - 400, //id为SILVERSTONE的标签距离页面顶部的位置减去400 赋值给b c = $("#Features").offset().top - 400; //id为SUPPORT的标签距离页面顶部的位置减去400 赋值给a 0 <= a && a < b && ($("#link li a").removeClass("on"), $("a[href='#Function']").addClass("on")); //当前滚动条位置大于等于0并且当前滚动条位置小于id为SILVERSTONE的标签距离页面顶端的位置时 将LIHGT标签高亮 b <= a && a < c && ($("#link li a").removeClass("on"), $("a[href='#Function']").addClass("on")); c <= a && ($("#link li a").removeClass("on"), $("a[href='#Features']").addClass("on")) }) }); </script>