<nav>
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Skill">Skill</a></li>
<li><a href="#Experience">Experience</a></li>
<li><a href="#More">More</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<div id = "About">
</div>
<div id = "Skill">
</div>
<div id = "AExperience">
</div>
<div id = "More">
</div>
<div id = "Contact">
</div>
一、点击a跳转到相应的div
var a = $('a[href]', 'nav');
a.click(function(){
var href = $(this).attr('href');
var o = $(href).offset();
$(window).scrollTop(o.top, 1000); //增加个动画效果
});
二、页面滚动时候,给上述a添加一个 ative的样式
var a = $('a[href]', 'nav');
$(window).on('scroll', function() {
a.removeClass('active');
for(var i = 0; i < a.length; i++)
{
var $a = a.eq(i), st = $(window).scrollTop();
var top = $a.offset().top;
if (st >= top && st <= $a.height() + top) // top >= st >= top + height
{
$a.addClass('active'); //此处已经获得了哪个a
break;
}
}
});