A rolagem suave é um recurso moderno de microanimação que aprimora a experiência do usuário, permitindo uma navegação fácil entre as seções de uma página. Em vez de pular para as seções instantaneamente, a rolagem suave cria uma transição fluida e envolvente. É uma maneira incrível de manter os usuários envolvidos sem sobrecarregá-los com saltos abruptos.

Neste artigo, exploraremos duas maneiras de implementar a rolagem suave:

• Usando CSS
• Usando JavaScript

Vamos primeiro nos aprofundar no uso de CSS para uma rolagem suave.

Por que CSS para rolagem suave?

CSS é o método mais simples e preferido para obter uma rolagem suave. É eficiente para o desempenho da página, pois nenhum JavaScript extra é carregado, tornando-o mais rápido e leve. Vamos implementar isso em nosso projeto.

Etapa 1: Criando a barra de navegação

Primeiro, vamos criar uma barra de navegação simples que contém nossos links de navegação. Esses links levarão os usuários a seções específicas da página.

Certifique-se de que os links de navegação sejam tags âncora, pois eles nos permitem pular facilmente para seções específicas da página.

Etapa 2: Criação de seções
Agora que temos nossos links de navegação, vamos criar as seções correspondentes.

Criamos seções para cada link de navegação.

Etapa 3: Adicionar conteúdo rolável
Para que a rolagem suave funcione, sua página precisa de conteúdo suficiente para rolar. Vamos adicionar um texto fictício para tornar a página rolável.

Finalmente temos conteúdo suficiente para tornar nossa página rolável.

Etapa 4: vinculando a navegação às seções
Usaremos o atributo href da tag âncora para fazer referência às seções para as quais queremos rolar. Basta adicionar um # seguido do ID da seção correspondente.

Então, o que basicamente estamos fazendo na imagem acima é usar o atributo href para referenciar a seção para a qual queremos que nossos links de navegação vão.

Etapa 5: Atribua o identificador (id) apropriado à seção apropriada

Então, o que fizemos agora foi simplesmente atribuir cada link à seção apropriada com o atributo href e os IDs. Portanto, o link de navegação com um href de #section-one seria correspondido com uma seção de id section-one

Agora, quando clicamos no link de navegação, somos levados para a seção.
Mas há algo que notamos, não é tranquilo, a página salta para a seção que não é uma ótima experiência.

Etapa 6: Adicionando rolagem suave com CSS
Para ativar a rolagem suave, adicione uma única propriedade CSS ao elemento html.

Quando adicionamos a propriedade scroll-behavior ao nosso html, podemos testemunhar o efeito de rolagem suave quando nosso link de navegação é clicado.

Como funciona

Nos bastidores, o atributo href na tag âncora é tradicionalmente usado para navegação para páginas externas ou URLs. No entanto, quando combinada com um # seguido por um ID de seção, a tag âncora "olha" dentro da página atual e rola para a seção correspondente. Adicionando o comportamento de rolagem: smooth; Propriedade CSS, criamos uma transição fluida entre as seções, melhorando a experiência geral do usuário.

A outra maneira de obter uma rolagem suave é usando JAVASCRIPT para lidar com isso.
Também podemos conseguir isso em apenas algumas etapas:

NB: Cada seção ainda teria o ID atribuído como antes.

Etapa 1: Crie uma função scrollIntoView

Podemos criar uma função em javascript que usaria o método scrollIntoView para obter o mesmo resultado. Assim:

Etapa 2: função de incorporação quando o link é clicado

incorporaremos a função scrollIntoView no ouvinte de evento anexado a cada link de navegação. Dessa forma, quando um link é clicado, a página rola suavemente para a seção referenciada.

Isso também pode ser refatorado dependendo da estrutura que você está usando para desenvolvimento.

Estas são duas maneiras simples de obter uma rolagem suave ao criar páginas da web intuitivas.

Deixe um comentário se tiver alguma dúvida ou feedback.