Como implementar a rolagem suave em JavaScript: um guia para desenvolvedores da Web
A rolagem suave é uma otimização empregada no design da web para fornecer aos usuários uma experiência de navegação perfeita e sem esforço. Este efeito é conseguido incorporando uma animação que suaviza o tradicional salto repentino associado aos movimentos de rolagem, melhorando assim a navegação dentro do conteúdo de um site.
Este guia visa fornecer aos desenvolvedores da Web uma compreensão completa de como incorporar a funcionalidade de rolagem suave em seus sites utilizando JavaScript.
Compreendendo a rolagem suave
Uma rolagem suave é caracterizada pela transição gradual do conteúdo de um site à medida que ele navega em direção a uma área específica, em vez de chegar abruptamente a esse ponto. Este método fornece uma experiência de navegação mais confortável e contínua para o usuário final.
Os benefícios da rolagem suave
A rolagem suave pode melhorar a experiência geral do usuário em um site de várias maneiras, incluindo, mas não se limitando a:
A aplicação desta técnica serve para melhorar o aspecto estético ao reduzir movimentos bruscos e desconexos de rolagem, conferindo uma sensação de requinte.
O aplicativo facilita uma experiência de navegação imersiva e contínua, que estimula a interação do usuário ao promover a exploração de conteúdos adicionais.
Por fim, a implementação da rolagem suave aprimora a experiência do usuário, facilitando a navegação contínua, especialmente em páginas da Web prolongadas e em diversas seções.
Implementando rolagem suave em JavaScript
A utilização de JavaScript permite a modificação do comportamento de rolagem vertical ou horizontal padrão para obter uma experiência de usuário mais suave e refinada.
Estrutura HTML
Desenvolva um conjunto abrangente de tags HTML que sejam apropriados para vários tamanhos de viewport e a navegação necessária para percorrê-los.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Smooth Scrolling Guide for Web Developers</title>
</head>
<body>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<section id="section1">
<h2>Section 1</h2>
</section>
<section id="section2">
<h2>Section 2</h2>
</section>
<section id="section3">
<h2>Section 3</h2>
</section>
<script src="./script.js"></script>
</body>
</html>
A barra de navegação incorporada neste código HTML apresenta três tags de âncora, cada uma possuindo um atributo href especificando o identificador exclusivo da seção de destino (por exemplo, section1, section2, section3). Conseqüentemente, quando alguém clicar em qualquer um desses links, será direcionado para o elemento de destino designado.
Estilo CSS
O código a seguir pode ser adicionado ao arquivo “style.css” para aprimorar a aparência visual da página da Web e transmitir um senso de organização:html/* Adicionar estilos para o cabeçalho fixo/header { position: fixed; superior: 0; esquerda: 0; largura: 100%; background-color: #333;}/Adicionar estilos para a cor de fundo branca/body { background-color: #fff;}/Adicionar estilos para o rodapé cinza */footer { margin: 20px 0; alinhamento de texto: centro; tamanho da fonte: 14px; altura da linha: 1,5;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
nav {
background: #fff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}
nav ul {
display: flex;
gap: 10px;
justify-content: center;
}
nav ul li {
list-style: none;
}
nav ul li a {
border-radius: 5px;
border: 1.5px solid #909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
A utilização dessa metodologia resultará na apresentação de hiperlinks como uma série de elementos semelhantes a botões, com cada seção sendo exibida como um componente vertical completo. Observe que, quando um usuário clica em um desses links, o navegador da Web navega imediatamente para a seção relacionada sem qualquer tipo de transição visual.
Seu navegador não suporta a tag de vídeo.
Implementação de JavaScript
Para criar uma animação contínua ao clicar em uma marca de âncora, utilize o método scrollIntoView(). Este método é uma função JavaScript inerente à classe Element que facilita a rolagem de um elemento na região visível da janela do navegador.
A invocação desse método resulta no ajuste da posição de rolagem do contêiner (como a janela ou um elemento rolável) para garantir que o elemento chamado fique visível.
Adicione seu código JavaScript ao arquivo script.js, tendo o cuidado de ouvir o evento DOMContentLoaded antes de executar qualquer outra ação. Ao fazer isso, você pode garantir que as operações subsequentes não serão iniciadas até que o Document Object Model (DOM) tenha sido totalmente carregado e esteja preparado para ser manipulado.
document.addEventListener("DOMContentLoaded", makeLinksSmooth);
Vamos agora delinear a funcionalidade da função makeLinksSmooth(). Para começar, selecione os elementos de ancoragem dentro dos elementos de navegação, pois eles sofrerão modificações. Posteriormente, percorra cada hiperlink e anexe um ouvinte de evento ao seu evento’clique'.
function makeLinksSmooth() {
const navLinks = document.querySelectorAll("nav a");
navLinks.forEach((link) => {
link.addEventListener("click", smoothScroll);
});
}
Por fim, vamos elaborar o aspecto final do contexto dado, expondo a definição da função smoothScroll() e elaborando o processo de anexar um ouvinte de evento a um elemento especificado, seguido pela aplicação do método preventDefault() para evitar o comportamento padrão do navegador quando um usuário clica na tag âncora fornecida. Posteriormente, o bloco de código designado deve ser executado no lugar do comportamento padrão.
Obtenha o valor do atributo “href” associado ao elemento mais recente da árvore DOM e atribua-o a uma variável. Espera-se que esse valor corresponda ao identificador do destino pretendido para a rolagem, que começa com o símbolo de hashtag ("#"). Utilize o métododocument.querySelector() para recuperar o elemento HTML correspondente ao referido identificador, e se tal elemento existir, execute sua metodologiascrollIntoView() passando como parâmetro o objeto de opção que contém a propriedade “smooth” configurada para true.
function smoothScroll(e) {
e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", });
}
}
Sua página da Web recém-criada deve navegar perfeitamente por todas as seções ao clicar em qualquer um de seus links, garantindo assim uma experiência de navegação sem esforço para os usuários.
Seu navegador não suporta a tag de vídeo.
Rolagem suave de ajuste fino
Para otimizar o efeito de rolagem contínuo, pode-se refinar características específicas.
Ajustando a posição de rolagem
A colocação vertical da rolagem pode ser regulada utilizando a propriedade’bloquear’dentro dos parâmetros de configuração. Valores como “start”, “center” ou “end” podem ser empregados para especificar a parte do elemento designado que deve ser rolada.
targetElement.scrollIntoView({ behavior: "smooth", block: "end" });
Adicionando efeitos de suavização
A utilização de efeitos de atenuação em animações de rolagem pode produzir uma progressão mais orgânica e esteticamente agradável. Várias funções de atenuação, como atenuação, atenuação ou curvas cúbicas-bezier personalizadas, podem regular a velocidade e a desaceleração do movimento de rolagem. A implementação de uma função de temporização personalizada por meio da propriedade CSS scroll-behavior ou uma biblioteca JavaScript como “smooth-scroll” também levará a resultados semelhantes.
/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}
Certifique-se de que a implementação de rolagem suave funcione perfeitamente em vários navegadores da Web e teste quaisquer peculiaridades ou discrepâncias que possam ocorrer. Resolva quaisquer problemas que surjam durante o teste para manter um desempenho consistente.
Você pode usar um site como Can I Use para testar o suporte do navegador durante a criação. Considere o uso de uma biblioteca JavaScript ou polyfill para garantir a compatibilidade entre navegadores e fornecer uma experiência perfeita para todos os usuários.
Elevando a experiência do usuário com rolagem suave em JavaScript
A implementação de rolagem suave por meio do uso de JavaScript permite que os desenvolvedores da Web criem um efeito de rolagem visualmente atraente e contínuo, resultando em uma experiência de usuário aprimorada.
A implementação de comportamentos de rolagem personalizados, a incorporação de efeitos de easing e a garantia de funcionalidade perfeita em diversos navegadores são essenciais para refinar o mecanismo de rolagem suave, resultando em uma navegação mais cativante e amigável