Preciso criar uma pagina em que quando alguem clica na opção contatos a pagina desci e vai p area de contatos logo abaixo na pagina. Quais elementos ou propriedades devo escrever?
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!
Solucionado
Preciso criar uma pagina em que quando alguem clica na opção contatos a pagina desci e vai p area de contatos logo abaixo na pagina. Quais elementos ou propriedades devo escrever?
Oi, Rebeca! Tudo bem?
Podemos resolver a sua dúvida da seguinte maneira:
Primeiro, precisamos ter uma seção de contato na página HTM, para isso, podemos pode usar a tag "div" com um ID específico, por exemplo:
<div id="contatos">
<!-- Conteúdo de contato aqui -->
</div>
Em seguida, precisaremos de um link que, quando clicado, levará à seção de contatos. Podemos usar a tag "a" com o atributo "href" apontando para o ID da seção de contatos, por exemplo:
<a href="#contatos">Contatos</a>
Entretanto, quando esse link for clicado, o navegador irá automaticamente para a seção de contato com uma transição instantânea. Dessa forma, se quisermos uma rolagem suave, precisaremos de um pouco de JavaScript, como no exemplo abaixo:
document.querySelector('a[href^="#"]').onclick = function(e) {
e.preventDefault();
var id = this.getAttribute('href').slice(1);
var target = document.getElementById(id);
var y = window.pageYOffset + target.getBoundingClientRect().top;
window.scrollTo({top: y, behavior: 'smooth'});
}
Este script fará com que, quando um link que começa com "#" for clicado, a página role suavemente até o elemento com o ID correspondente.
Espero ter ajudado! Caso tenha ficado alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!
Um forte abraço e bons estudos!