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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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!