Vamos criar um menu fixo com alguns links, ao clicar nesses links a página vai rolar suavemente para um elemento em questão!

Primeiro criamos o html da página que é muito simples, uma div com alguns links, esse será o menu fixo.

O atributo “ref” é onde eu ponho o link do elemento que eu quero que scrole, ficará mais claro adiante.

Agora vou colocar algumas imagens pra servir de exemplo

Para que o menu fique fixo na página, ou seja acompanhe o scroll, colocamos a propriedade css position: fixed

Agora o JS que faz toda a ação do scroll suave

O que esse script faz é

1 – criar uma variável chamada obj, essa variável é um seletor de css que criamos usando o atributo ref dos links do menu, então se o ref do link 1 é “foto1”, então o valor de obj vai ser “img.foto1”.

2 – usando o método animate do jquery, fazemos uma scrolagem suave até o elemento em questão, que elemento é esse?justamente o correspondente ao ref do link clicado.

3 – é possível ainda, aumentar ou diminuir o tempo da animação de scroll, trocando o valor de 1200 por outro qualquer, 1500, 2000, etc.

Link de exemplo AQUI