Como criar scroll com JQuery

Posted on Posted in JavaScript, Tutoriais

Olá pessoal, hoje vou ensinar como criar scroll com JQuery, deixando seu site com uma animação bem legal. Para quem não sabe, esse efeito scroll é simplesmente rolar a barra de rolagem para uma determinada área do site ao clicar em menu ou botão, como estamos utilizando JavaScript é possível deixar a rolagem mais suave e harmoniosa.

Vamos aos passos do exemplo que desenvolvi:

1- Crie o arquivo html com menu e dentro do body as sessões que você deseja. No menu é importante colocar a classe que será usada no JavaScript, neste exemplo usei a classe com nome “scroll”.

2- Crie o css para estilizar o menu e as sessões, você pode fazer como no exemplo, definindo largura e altura das sessões em 100% para que ocupe toda a janela, ou pode definir outros tamanhos, fica a seu critério.

3- Crie o JavaScript. Agora usamos a classe definida “scroll” na execução da função responsável pela animação.

Observação: Algumas pessoas utilizam o “preventDefault” no lugar do “return false”, como no exemplo a seguir:

Mas fazendo dessa forma bloqueia todos os links do site, funcionando apenas o menu com o scroll, ou seja, retira a função padrão dos links de redirecionar para outro endereço. Por isso optei por utilizar o “return false”, que possibilita o funcionamento do scroll sem bloquear os outros links do site.

Veja o resultado final: Clique aqui!

Espero que tenham gostado do tutorial, deixem seus comentários e compartilhem o post.

Até a próxima, beijos.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *