navegação animada ScrollTo com NavBar Fixa

by Salustiano Silva

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><a href="#section_1">Div 1</a>
    </li>
    <li role="presentation"><a href="#section_2">Div 2</a>
    </li>
    <li role="presentation"><a href="#section_3">Div 3</a>
    </li>
    <li role="presentation"><a href="#section_4">Div 4</a>
    </li>
    <li role="presentation"><a href="#section_5">Div 5</a>
    </li>
</ul>
<div id="sections">
    <div id="section_1">Olá 1</div>
    <div id="section_2">Olá 2</div>
    <div id="section_3">Olá 3</div>
    <div id="section_4">Olá 4</div>
    <div id="section_5">Olá 5</div>
</div>

CSS

html, body {
    height:100%;
}
.nav {
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:black;
    color:#FFF;
}
#sections, #sections > div {
    width:100%;
    height:100%;
}
#section_1 {
    background:green;
}
#section_2 {
    background:yellow;
}
#section_3 {
    background:white;
}
#section_4 {
    background:blue;
}
#section_5 {
    background:pink;
}

JavaScript

$(function () {
    /* Retirar da tag "body" a altura que a barra de navegação consome
     * para que as "div" fiquem todas com o máximo de altura da tela.
     */
    var navH = $('body > .nav').outerHeight(true);
    $('body').css({
        "margin-top": navH + "px"
    });

    /* Anexar um evento de clique nos links de navegação
     */
    $('body > .nav').on("click", 'a', function (e) {
        e.preventDefault(); // cancela o scrollTo do navegador

        var target = $(this).attr("href"), // apanhar ID da "div" alvo
            elementOffset = $(target).offset().top, // distancia do elemento alvo até ao topo
            distance = (elementOffset - navH); // distancia que é necessário percorrer

        /* Animar o ScrollTo do navegador
         */
        $("html, body").animate({
            scrollTop: distance
        }, '500', 'swing', function () {
            /* Atualizar elemento ativo após animação concluída
             */
            $('body > .nav .active').removeClass("active");
            $('a[href="' + target + '"]').parent().addClass('active');
        });
    });
});