Skip to content

Instantly share code, notes, and snippets.

@szagot
Last active Mar 27, 2017
Embed
What would you like to do?
/**
* 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 );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment