<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;
        }
    }
        
});