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>
Post sobre scroll to após redirect no jQueryBrasil.org
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.
Cara, muito loko isso.
É sempre bom ter esses exemplos. Parabéns pelo seu blog.
Abraço,
Obrigado pelo comentário.
Boa magones, só conhecia o plugin veio. Simples =P
Muito massa!
vlw msm’
justamente o que eu estava precisando… muito bom! Valeu!
Olá, estava procurando mesmo isso!
Para o código não ficar obstrutivo a gente poderia dar uma modificada!
Fica aqui a minha contribuição, não tirando os méritos do nosso amigo Ruan, é claro!
———————————–
E no jQuery:
$('#subir').click(function() { $('html,body').animate({scrollTop: $('#vemaqui').offset().top}, 2000); });———————————-
Pronto! Não-obstrutivo!
Abraços!
Eu não lembro o pq eu precisei colocar com o JavaScript inline, mas era incompatibilidade com algo que eu usava aqui no site antes. Vlw por lembrar.
Boa, fica bem mais leve do que usa o plugin
parabens
Obrigado.
Olá!!
Sou novo em JQuery e estou tendo dificuldades para inserir esse código no meu html, pode me ajudar? O endereço é esse que passei (teste.html)mesmo, estou testando pra depois implementar no real site, mas preciso saber primeiro como fazer funcionar ^^, agradeço desde já!!
Forte abraço!!!
Siga esse exemplo aqui. http://jsbin.com/ayuji/edit
Muito útil. Obrigado!
Simples, e eu fiquei horas procurando algo desse tipo, amigo parabens pela simplicidade do código e obrigado pela contribuição.
Ruan, se no meu caso eu quisesse fazer mover paras as laterais é do mesmo jeito?
Fabricio, foi mals ai, tive q dar um tempo por causa do TCC, mas assim, para as laterais seria relativo ao Left ao invés do top, para isso basta trocar o código:
$('#div-q-vc-quer-animar').animate({ scrollLeft: $('#elemento-desejado').offset().left }, 2000);Pronto.
Exatamente o que eu queria vlw mesmo ^_^
Certinho o que queria…
Justamente,o que eu proucurava, muito simples e pratico, valeu !!
Muito bom, precisava de algo mais simples que o plugin, Valew mesmo!
Vlw cara! Funcionou certinho!
mto bom cara! vlw
Muito bom mesmo.
Estou tentando para ir para o lado… sem nenhum resultado, alguem ajuda?
Alguns comentários acima esta sua resposta.
Como eu faço para que não pare no limite da tela? Colocar para parar uns 10px a cima da div #vemaqui?
É possivel?
Simples, só colocar um – (menos) a quantidade de pixel que você quer após o offset().top como isso http://jsfiddle.net/ruanltbg/PPhM2/
Uma coisa que fiquei pensando, é possivel fazer uma verificação para saber se já está parado no #vemaqui? Pois se a pessoa clicar novamente, a tela ficará parada, mas não poderá mover a barra de rolagens, pois o jquery estará rodando a solicitação.
Simples assim: http://jsfiddle.net/PPhM2/1/
Mandou bem =D
O meu portfolio vai ser uma página só com 4 links e todo o conteúdo…Ai quando eu clicar em ‘Contato’ por exemplo,quero que o efeito role até contato…
Como os links estão todos no mesmo lugar(#header,que uso como o #ir que você botou),só dá pra usar uma vez…
Como modifico o código pra usar os links para partes diferentes da página?
Espero resposta.
Não entendi sua dúvida, seu target vai ser diferente, então não tem problema.