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.
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.
Cara, precisava de um script mais ou menos como esse.
Bem, na realidade é bem diferente, mas mesmo assim precisava de um que quando troque de página, ele ative posteriormente a ancora e vá com scroll animado até a ancora que eu escolher no menu.
tipo:
quando eu clicar nisso, ele vai para a página e começa no topo e desce com scroll animado até a divi #ancora.
É simples, basta vc implementar isso no seu index.php
isso pode te ajudar:
Sim… mas o lance animado não entendi, pois não rolou aqui… simplesmente retornou o valor da ancora em html.
E não é só disso que vc precisa para fazer a animação?
Não necessariamente… quando ele muda de página, o link com ancora vai seco para o lugar que eu disse que era para ir. Queria que fosse com animação.
o window.location.hash somente me dá o valor da ancora em html… quero que o scroll vá até a ancora, mas por ser em outra página, ele da refresh e não vai com scroll.
Posta sua dúvida no http://groups.google.com/group/jquery-br, lá vão te ajudar.
Como usar com ancoras de uma página para outra?
Não entendi.
Eu clico em uma ancora em uma página e ela me leva para outra página! ai quando entrar nessa página ela vai direto para uma parte especifica
Agora entendi, farei um post em breve para explicar, pois aqui ficaria um pouco complexo.
Era essa minha dúvida também… mas não souberam responder
Obrigado Ruan por compartilhar seus conhecimentos!
[...] muito tempo (muito mesmo, em 2009) eu fiz um post no meu blog sobre scroll to – scroll animado com jQuery. Devido algumas pessoas estarem com dúvidas de como fazer isso mas após um redirect de página, [...]