jQuery plugin para rolagem suave de âncoras

Fala galera esperta, blz?

Essa semana estava precisando fazer com que uma âncoras. Mas perae, o que são âncoras?

Segundo o Wikipedia:

A predefinição {{âncora}} insere uma âncora em HTML <a></a> numa página, permitindo que se criem ligações para essa parte da página.

http://pt.wikipedia.org/wiki/Predefinição:Âncora

Precisei fazer com que essas âncoras não fosse uma mudança brusca na página, mas que tivessem uma rolagem suave, ou seja, frescura de designer.

Vamos ao código:

$('.anchorList a').smoothScroll();

jQuery.fn.smoothScroll = function(){
	$(this).each(function(){
		var node = $(this);
		$(node).click(function(e){
			var anchor = $(this).attr('href');
			anchor = anchor.split("#");
			anchor = anchor[1];
			var t = 0;
			var found = false;
			var tName = 'a[name='+anchor+']';
			var tId = '#'+anchor;
			if (!!$(tName).length){
				t = $(tName).offset().top;
				if ($(tName).text() == ""){
					t = $(tName).parent().offset().top;
				}
				found = true;
			} else if(!!$(tId).length){
				t = $(tId).offset().top;
				found = true;
			}
			if (found){
				$("body, html").animate({scrollTop: t}, 500);
			}
			//e.preventDefault();
		});
	});
	var lAnchor = location.hash;
	if (lAnchor.length > 0){
		lAnchor = lAnchor.split("#");
		lAnchor = lAnchor[1];
		if (lAnchor.length > 0){
			$("body, html").scrollTop(0);
			var lt = 0;
			var lfound = false;
			var ltName = 'a[name='+lAnchor+']';
			var ltId = '#'+lAnchor;
			if (!!$(ltName).length){
				lt = $(ltName).offset().top;
				if ($(ltName).text() == ""){
					lt = $(ltName).parent().offset().top;
				}
				lfound = true;
			} else if(!!$(ltId).length){
				lt = $(ltId).offset().top;
				lfound = true;
			}
			if (lfound){
				$("body, html").animate({scrollTop: lt}, 500);
			}
		}
	}
}

O que nós fazemos?

Pegamos todos os links, que nesse caso, são filhos de “.anchorList”, você pode mudar para o que quiser, só um id ou todos os links da página.

Ao clicar no link, explodo o href para pegar só o que tiver depois do tralha, para poder buscar se é a ancora é feita com name em um link, ou se é por id.

Ao verificar qual o gancho da âncora, pego a distancia do topo da página até o elemento, mas caso a âncora seja com name no link e nao tenha conteudo, html ou texto, tenho o cuidado de pegar a medida do elemento pai da âncora, pois no chrome tive uns problemas por não ter conteudo dentro dela.

Feito isso, faço uma verificação para saber se realmente existe a ancora e fazer a rolagem suave.

Olha lá o exemplo do plugin de jQuery para rolagem suave de âncoras.

E como sempre, gostou? não gostou? comentae.

Abraços.