Muito usado em listas de perguntas frequentes ou em sites com muito conteúdo, os links âncoras (href=”#topo”) tem sua importância. Para deixar esta navegação mais bonita temos um plugin do jQuery chamado scrollTo (vai ser abordado no próximo post).
Mais para quem não pretende usar um plugin para isso, existe um código simples para fazer este feito maravilhoso.
Um simples código com a função animate() do jQuery faz isso.
$('html, body').animate({
scrollTop: $("#vemaqui").offset().top
}, 2000);
Agora, basta ter a chamada desta função, que pode ser assim.
<input type="button" onclick="$('html,body').animate({scrollTop: $('#vemaqui').offset().top}, 2000);" value="Veja Funcionando" ><br>
Bacharel em Sistemas de Informação pela Unibrasil, trabalha com web desde 2004, atualmente trabalha na No Zebra Network como desenvolvedor Ruby. Também é Administrador do grupo de jQuery Brasil, e colaborador/idealista do site jQueryBrasil.
Digo isso porque quero usar vários links…e só tem a div header como referência pra iniciar o ‘rollto’.
Sim,já resolvi.A questão é que os links que eu queria aplicar o efeito já tinha uma classe,só apliquei um id e usei ele para aplicar o efeito.Assim fica uma classe para os estilos do link e um id só para o efeito Scroll-to.De qualquer modo,Vlw!
Perfect!
Fala Ruan, li aqui seu artigo e gostaria de entender melhor.
Vi que você tem um exemplo na sua página, mas sou leigo em java.
Queria usar isso que você vez em uma pagina simples, com 3 links.
-Home que seria topo
-texto1
-texto2
Como eu aplicaria isso em um HTML simples com link nas palavras?
Você pode me ajudar?
Um abraço, Fernando.
Olá Fernando.
Podemos começar dizendo que JavaScript não tem nada a ver com Java são duas linguagens completamente diferentes.
Segundo, o código para isso você pode conferir aqui http://jsbin.com/ayuji/113/edit (se tirar o edit da url ele abre o exemplo em si).
Consegui, mas obrigado de qualquer forma
Cara eu tava precisando dessa função, mas passando a partir de um link com o um parametro do tipo href=”?url=empresa”
para que quando o usuario atualiza-se o site ele entenderia a posição que deve ficar.
Para isso serve os links ancoras, #id_do_lugar_que_vc_quer
Muito legal mesmo!!
Obrigado pela ajuda
Muito bom. Simples e objetivo!
Vlw pela ajuda, foi de grande proveito!
Parabéns pelo script amigo. Detesto ficar entulhando minha página com plugins e esta solução é simples e prática. Twitado.