Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Navegação dentro da landing page

Boa tarde,

Como faço para ao clicar em um item da minha navbar, por exemplo a seção sobre, meu site role um pouco para baixo até chegar nessa seção?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Olá Renan, tudo bem?

Podemos criar esse efeito de rolagem suave através dos seguintes passos:

No HTML:

1º No navbar, acrescentamos o identificador #:

<li><a href="#sobre">Sobre</a></li>

2º Na seção sobre, acrescentamos o seletor id:

<section id="sobre">
    <h1>Sobre</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nobis nostrum error tempora natus quo ad soluta nemo ex nesciunt consequuntur qui debitis sunt fugit, adipisci quasi dicta voluptas! Recusandae.</p>
</section>

No CSS:

3º Criaremos o efeito de "rolagem suave", utilizando a seguinte propridade:

html {
  scroll-behavior: smooth;
}

Caso queira aprender um pouco mais sobre essa propriedade, vale a pena a leitura:

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

Bom dia Beatriz,

Deu certo aqui. Consegui implementar sua dica no meu código.

Muito obrigado!