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?
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?
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!