Bom, a pedido de um dos nossos leitores, hoje temos aqui um tutorial de como suavizar o scroll da página quando utilizada a roda do rato (mouse).
Para isso vamos utilizar o plugin jQuery.scrollSpeed. Um plugin leve e de acordo com o autor, suporta os demais navegadores:
- Google Chrome
- Safari ( Desktop )
- Internet Explorer ( Desativado para performance, e também porque o scroll nativo do novo IE meio que já faz o trabalho )
- Firefox
- Opera ( Não Testado )
Então utilizando este plugin já estamos a evitar dores de cabeça indesejadas e problemas de compatibilidade com navegadores etc.
Ora então vamos lá. Para fazermos com que este plugin funcione correctamente, primeiro precisamos de implementar a biblioteca jQuery no `<head>` do nosso site/documento. Se não tens ideia do que uma biblioteca jQuery é, dá uma olhada nestes links:
Podemos hospedar esta biblioteca jQuery no nosso servidor, fazendo upload dela para o mesmo e depois chamá-la dependo do sítio de onde ela está situada, com a seguinte linha de código:
```
<script src="/js/jQuery.min.js"></script>
```
Isto dependendo de onde a colocamos no nosso servidor. Neste exemplo acima, ela encontrar-se dentro da pasta `root => js => jQuery.min.js`. Ou podemos utilizar outros serviços onde já existem bibliotecas como esta hospedada, como por exemplo o Google fornece publicamente e sem qualquer custo, basta chamá-la da seguinte maneira:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
```
Então agora que já temos a nossa biblioteca jQuery implementada precisamos fazer o mesmo com o plugin, novamente se ela estiver hospedada no nosso servidor basta utilizarmos algo como:
```
<script src="/js/jQuery.scrollSpeed.js"></script>
```
Ou, podemos utilizar os ficheiros diretamente do Github, isto caso este esteja hospedado no gihub, "Puxando" o ficheiro do Github utilizando o: Rawgit:
```
<script src="https://cdn.rawgit.com/nathco/jQuery.scrollSpeed/master/jQuery.scrollSpeed.js"></script>
```
E finalmente, depois de fazer tudo isto, basta chamar o plugin, fazendo referência do mesmo usando o seguinte código jQuery:
```
<script>
$(function() {
// Default
jQuery.scrollSpeed(100, 800);
});
</script>
```
(Podes ler mais sobre a sua utilização e documentação aqui neste link. Aumentar/diminuir a velocidade, o quanto a página irá rolar etc)
Podemos colocar este código também no `<head>` após a implementação dos códigos acima, pode mesmo até ser nesta ordem, ou podes colá-lo no `<body>` que não tem muita importância.
No final de todo este trabalho feito, este é o resultado de como o código irá ficar, e como irá funcionar. Eu criei este exemplo no jsFiddle com o código todo adicionado na janela HTML, para dar uma ideia de como ele irá ficar no vosso site:
► https://jsfiddle.net/src_code/7aj3kx18/