df Javascript Smooth Scroll é uma pequena biblioteca que oferece efeito de transição em links na forma de âncora em sua página web. É compatível com a maioria dos navegadores e so pesa 1024 bytes.
Tipicamente ao clicar em um link na forma de âncora, o browser se move diretamente na posição do texto marcado pela âncora, porém se desejamos aplicar um efeito suave para acessar a âncora, esta é a biblioteca que desejamos utilizar.
Como utilizar Smooth Scroll
Seu uso é muito simples, assim que baixar os arquivos [df_smooth_scroll.zip], podemos adicionar o smooth.pack.js em nossa página:
-
<script type=“text/javascript” src=“smooth.pack.js”></script>
O passo seguinte é criar a âncora de forma normal, não é necessário adicionar nenhum outro código adicional:
-
<a href=“#rodape” name=“topo”>Ir pro Rodape</a>
-
<p> text body </p>
-
<a href=“#topo” name=“rodape”>Ir pro Topo</a> Veja exemplo funcionando
Ótimo post….
valeu mesmo
Abraços
Só tem um problema Jonas, ele não funciona com o lightbox, isso pode ser resolvido.
O problema é que quando a foto abre no lightbox o link para fechar a foto é uma âncora, dai ele não fecha a foto.
Bem Rique, realmente não cheguei a testar com LightBox, mas faz sentido sim isso q vc falou… podemos pensar em diversas soluções para contornar isso…
Amigo, como faço para fazer essa rolagem horizontalmente ?!
Bem, na verdade é âncora, basta você colocar a ancora em seu texto horizontal, que ele vai seguir…
amigo,sei q esse post tem quase um ano,mais eu achei interessante o funcionamento dele.
eu queria saber( caso alguém ainda vá ler isso rs ) se poderia disponibilizar o código do js para download.
[]’s
Anderson Baldner
Caro Anderson,
Atualizei o link para download, pois estava quebrado, agora você já pode baixar: http://www.dezinerfolio.com/system/files/df_smooth_scroll.zip
po kra,o script tá formidavel,mais infelizmente horizontalmente não funcionou.
tem como eu adaptar o script pra ele seguir horizontalmente?
abraços
paz!
Sim, é so editar o arquivo smooth.pack.js
Valeu, abs!
ola galera uma duvida estou fazendo uma site para o cliente que o que o site são duas partes juntas então a pessoa clica e dece uma ancora para segunda parte com o seu respectivo assunto só que cada assunto leva para uma ….. diferente ai no caso em vez do meu link ser http://meusite.com.br#meuconteudo ela fica http://meusite.com.br/meuconteudo.html#meuconteudo ela ai ele funcionou na hora de voltar para 3index mas na hora de ir para o determinado menun ele não vai auguem sabe me ajudar
Olá pessoal, estava testando esse efeito, mas não funcionou no fire fox e nem no chrome, e ai alguem já tentou?
Galera, para resolver o problema do lightbox é só alterar a linha 156 de Builder.node(‘a’,{id:’bottomNavClose’, href: ‘#’ }, para Builder.node(‘a’,{id:’bottomNavClose’, href: ” },
Aqui rolô!
Abçss!!
Caro Jonas, por favor,
Existe uma maneira de fazer funcionar este efeito sem clicar em botão e sim no onLoad (carregamento da página?)
Estou me matando aqui mas não funciona…..
Este é o código que estou usando atualmente que funciona, mas sem o smooth:
function ponto()
{
location.href = “#descer”;
}
Obrigado, abs.
Alguma maneira de fazer funciona no ON LOAD?
Obrigado
Giuliano, ainda não testei isso, mas creio que com Jquery daria pra criar algo que chame o href da âncora.
Olá!
Já pesquisei pelo Google, olhei atentamente cada letra e não consegui nada… Sabe como e onde posso controlar a velocidade? Quero diminuir…
Obrigado
O meu caso aqui é um joomla. tom montando o template e queria saber onde que eu coloco o arquivo .js
Eu lí os comentários desde o início,
1º- Danilo, o script rola no Chome e firefox sim, no firefox até rola mais tranquilo;
2º – Aqui uma questão:
_____________________________
function ponto()
{
location.href = ‘#descer’;
}
______________________________
Não testei mas acho que funciona.
Giuliano já tentou colocar aspas ‘ ‘ simples ao invés de duplas ” “?
ou use o exemplo abaixo;
3º – No exemplo vindo no download fala em div mas se não é o caso de usar div eu modifiquei os links;
( link )
Texto do link
( âncora )
nem precisa de colocar texto aqui, apenas fechar a tag
Fiz isso e funcionou perfeitamente.
Engraçado eu fiz os exemplos e o site leu como link e os escondeu, aí vai de novo.
3º – No exemplo vindo no download fala em div mas se não é o caso de usar div eu modifiquei os links;
( link )
Texto do link
( âncora )
nem precisa de colocar texto aqui, apenas fechar a tag
caramba não funcionou novamente então vou mudar < para { mas para usar o exemplo tem que mudar novamente para o correto que é }
Não deu certo de novo então mudei para \ e /
( link )
\a href=”#nome do âncora”/ Texto do link \ /a/
( âncora )
\a name=”nome do âncora” href=”#”/ nem precisa de colocar texto aqui, apenas fechar a tag \ /a /
Agora sim…