scrollTo.js

/**
 * Move o scroll para o primeiro alvo encontrado
 * Ref.: https://gist.github.com/szagot/c0ed8de129e12024fb9091bce2fcae28
 * Exemplo (vide índice): http://wiki.tmw.com.br/08-autenticacao-da-api#fluxo
 *
 * Obs.: Necessita de jQuery: https://jquery.com/
 *
 * Exemplos de uso:
 *      // Vai até o topo da página em meio segundo
 *      scrollTo();
 *
 *      // Vai até o titulo alvo em meio segundo
 *      scrollTo( '#titulo' );
 *
 *      // Vai até 50px antes do titulo alvo em 1 segundo
 *      scrollTo( '#titulo', 1000, 50 );
 *
 *      // Vai até 50px antes do titulo alvo em 2 segundos, informando no console quando acabar a animação
 *      scrollTo( '#titulo', 2000, 50, function() { console.log('acabou'); } );
 *
 * @param target Deve ser no mesmo formato de alvos CSS. Exemplos: "#id" ou ".class". Padrão: "#", i.e., Topo.
 * @param time Tempo em milissegundos para a animação. Padrão: 500
 * @param decreaseHeight Altura a decrementar do topo. Padrão: 0
 * @param endAction Função para ser executada ao final da ação
 */
function scrollTo( target, time, decreaseHeight, endAction ) {
    // Alvo padrão: Topo
    target         = target || '#';
    // Padrão  de decremento da posição do elemento em relação ao topo: 0
    decreaseHeight = (decreaseHeight || 0) * 1;
    // Tempo padrão: 500ms
    time           = (time || 500) * 1;

    // Pega tanto o html (para o firefox) como o body (para demais navegadores)
    var janela = $( "html, body" );
    if ( target !== '#' ) {
        // Indo para o alvo
        var targetElement = $( target ).eq( 0 );
        // Pega a posição do elemento alvo
        var targetTop     = targetElement.offset().top - decreaseHeight;
        // Movimenta o scroll para a posição do elemento (garante que não seja menor que 0)
        janela.stop().animate( { scrollTop: (targetTop < 0) ? 0 : targetTop }, time, endAction );
    } else {
        // Movimenta o scroll para o topo
        janela.stop().animate( { scrollTop: 0 }, time, endAction );
    }

    // Mudando o estado do histórico se o target for um ID
    if ( target.match( /^#/ ) ) {
        window.history.pushState( null, null, target );
    }
}