Vincule e pule para diferentes seções de sua página da web com scroll de página animado e sem usar uma única linha de JavaScript!
O elemento âncora
Vamos começar nossa jornada com o bom e velho elemento de âncora confiável. Não podemos ser mais simples do que isso quando se trata de alcançar interatividade apenas com HTML!
No contexto das páginas HTML, as âncoras são links que podem levá-lo a um site ou arquivo externo, ou a um local dentro do documento ativo. Este é o elemento âncora em sua forma mais básica, vinculando o texto do “Google” ao google.com:
<a href="http://www.google.com">Google</a>
Clicar no texto dentro das tags <a> nos levará ao URL especificado no atributo href. Nada inesperado até agora.
Você também pode ter usado o atributo target no passado para controlar onde queremos que o URL vinculado seja aberto.
<a href="http://www.google.com" target="_blank">Google</a>
Navegar na página com Scroll
Outro recurso útil do elemento âncora é a capacidade de vincular a um elemento específico na mesma página. Informar ao navegador a qual elemento gostaríamos de vincular funciona por meio de IDs.
Primeiro, você adiciona um ID ao elemento que deseja vincular:
<h2 id="intro">Intro title</h2>
Em seguida, faça referência ao ID (prefixado com um hash) no atributo href do elemento âncora:
<a href="#intro">Go to intro title</a>
intro neste formato é chamado de fragmento de URL que é um nome precedido por uma marca de hash (#). Este fragmento de URL especifica um local de destino interno (um ID de um elemento HTML) no documento atual.
Quando você clica no link, o navegador rola a página até o local no documento onde o elemento com o ID de introdução está visível.
Se você tem um artigo mais longo e deseja criar uma seção de índice no topo da página, pode configurar várias âncoras com links para títulos individuais.
Construindo um sumário interativo com âncora
Vou adicionar dois links na seção de índice no topo da página, logo abaixo do título principal. Mais abaixo na página, temos os títulos secundários com os IDs correspondentes aos quais as âncoras serão vinculadas:
Agora você pode experimentar os links clicando neles na parte superior e, se os IDs dos títulos corresponderem aos fragmentos de URL nas âncoras, o navegador irá rolar para o local correto.
Adicionando um botão Voltar ao Topo
Agora que você forneceu uma maneira fácil para o usuário pular instantaneamente para certas seções, você também pode adicionar um botão flutuante “Voltar ao topo” para levá-los de volta imediatamente, sem ter que rolar para cima.
O truque é adicionar uma única marca de hash no atributo href. Isso apenas criará um link para o próprio documento para que o navegador volte ao topo da página:
<body> <!-- table of contents --> <!-- page content --> <a id="to-top" href="#">Back to top</a> </body>
Clicar neste novo botão leva você de volta ao topo, no entanto, o link está na parte inferior da página, então você não pode rolar para trás a partir da metade da página. Acho que seria melhor fixá-lo no canto esquerdo inferior da página e acompanhá-lo conforme você rola. Para conseguir isso, tudo o que precisamos fazer é definir o posicionamento como fixo e adicionar algum deslocamento das bordas da página:
#to-top {
position: fixed;
bottom: 10px;
left: 10px;
}
Por padrão, os elementos âncora são renderizados como texto simples e sublinhado, mas seria muito melhor se nosso link “Voltar ao início” parecesse um botão adequado.
Para dar aos botões esse estilo, algumas coisas precisam ser adicionadas ao CSS:
#top {
position: fixed;
bottom: 10px;
left: 10px;
padding: 10px 20px;
background-color: var(--dark-blue);
color: white;
font-size: 14px;
font-weight: normal;
text-decoration: none;
border-radius: 20px;
}
Adicionando rolagem de página suave e animada
No momento, a navegação é apenas um salto direto para a seção relevante, então este pode ser o ponto em que você ou outra pessoa de sua equipe terá a ideia brilhante de melhorar a experiência do usuário animando o pergaminho.
Seu pensamento imediato pode ser obter alguma ajuda do JavaScript e implementar a transição de rolagem suave com algum código. Enquanto você está nisso, você também pode ficar tentado a simplesmente descartar toda a lógica de ancoragem do HTML e reconstruir tudo com JavaScript.
Bem, não procure mais nessa direção, pois podemos resolver todos os nossos problemas com uma única declaração CSS:
html {
scroll-behavior: smooth;
}
Este único pedaço de CSS fará com que nossa página role sem problemas!
Existem apenas duas configurações aqui: suave ou automático, e não queremos automático, pois esse é simplesmente o comportamento padrão do navegador que tínhamos anteriormente.
Manter as âncoras e não implementar essa lógica com JavaScript (ou talvez jQuery) nos deu muitos benefícios:
- O código é realmente simples, até mesmo a rolagem suave era apenas uma única declaração CSS.
- Implementar a navegação da página com âncoras em vez de JavaScript tornou nossa página acessível, à prova de futuro e amigável para SEO.
- Não ter que baixar jQuery ou qualquer JavaScript extra mantém a página leve, o que nos dá tempos de carregamento de página super-rápidos.
- Economizamos muito tempo e esforço de desenvolvimento seguindo a rota simples de HTML e CSS.
Mas não é aqui que tudo termina. O elemento âncora tem muito mais características interessantes na manga, que é o que vamos descobrir em um futuro próximo.
Fique atento! Acesse nosso Blog.