A rolagem suave é uma técnica usada no desenvolvimento da Web para criar uma experiência de rolagem fluida para os usuários. Ele aprimora a navegação em uma página da Web, animando o movimento de rolagem em vez do salto abrupto padrão.
Este guia abrangente para desenvolvedores da Web ajudará você a implementar a rolagem suave usando JavaScript.
A rolagem suave ocorre quando uma página da Web rola suavemente para a seção desejada, em vez de pular para lá instantaneamente. Isso torna a experiência de rolagem mais agradável e perfeita para o usuário.
últimas postagens
Os benefícios da rolagem suave
A rolagem suave pode melhorar a experiência do usuário em uma página da Web de várias maneiras:
- Ele aumenta o apelo visual eliminando saltos de rolagem abruptos e dissonantes, adicionando um toque de elegância.
- Ele incentiva o envolvimento do usuário, fornecendo uma experiência de rolagem fluida e contínua. Isso, por sua vez, motiva os usuários a explorar mais o conteúdo.
- Por fim, a rolagem suave torna a navegação mais fácil para os usuários, principalmente ao lidar com páginas da Web extensas ou ao se mover entre diferentes seções.
Para implementar a rolagem suave, você pode modificar o comportamento de rolagem padrão usando JavaScript.
Estrutura HTML
Primeiro, crie os elementos de marcação necessários para as diferentes viewports e a navegação para rolar entre elas.
<!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="https://wilku.top/a-guide-for-web-developers/./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="https://wilku.top/a-guide-for-web-developers/./script.js"></script>
</body></html>
Este HTML consiste em uma barra de navegação contendo três tags de âncora. O atributo href de cada âncora especifica o identificador exclusivo da seção de destino (por exemplo, seção1, seção2, seção3). Isso garante que cada link em que você clicar navegue até o elemento de destino correspondente.
Estilo CSS
Em seguida, aplique um pouco de CSS para tornar a página visivelmente atraente e organizada. Adicione o seguinte ao style.css:
* {
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;
}
Isso renderizará os links como uma linha de botões e cada seção como um elemento de altura total. Mas observe como clicar em um link faz com que o navegador pule instantaneamente para a seção correspondente, sem animação.
Implementação de JavaScript
Para adicionar uma animação suave ao clicar em uma marca de âncora, use o método scrollIntoView(). O método scrollIntoView() é um método JavaScript integrado da classe Element que permite rolar um elemento para a área visível da janela do navegador.
Quando você chama esse método, o navegador ajusta a posição de rolagem do contêiner do elemento (como a janela ou um contêiner rolável) para tornar o elemento visível.
Adicione seu código JavaScript ao arquivo script.js. Comece ouvindo o evento DOMContentLoaded disparar antes de fazer qualquer outra coisa. Isso garante que o retorno de chamada seja executado apenas quando o DOM estiver totalmente carregado e pronto para ser manipulado.
document.addEventListener("DOMContentLoaded", makeLinksSmooth);
Em seguida, defina a função makeLinksSmooth(). Comece selecionando as tags de âncora na navegação, já que você deseja modificar seu comportamento. Em seguida, itere cada link e adicione um ouvinte de evento para seu evento de clique.
function makeLinksSmooth() {
const navLinks = document.querySelectorAll("nav a"); navLinks.forEach((link) => {
link.addEventListener("click", smoothScroll);
});
}
Por fim, defina a função smoothScroll() que recebe um objeto ouvinte de evento. Chame preventDefault() para garantir que o navegador não execute sua ação padrão quando você clicar no link. O código a seguir o substituirá.
Pegue o valor href da tag âncora atual e armazene-o em uma variável. Esse valor deve ser o ID da seção de destino, com o prefixo “#”, então use-o para selecionar o elemento da seção via querySelector(). Se o targetElement estiver presente, execute seu método scrollIntoView e passe o comportamento “smooth” em um parâmetro do objeto para completar o efeito.
function smoothScroll(e) {
e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId); if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", });
}
}
Com isso, sua página da Web finalizada rolará suavemente para cada seção quando você clicar em um link:
Para aprimorar ainda mais a experiência de rolagem suave, você pode ajustar certos aspectos.
Ajustando a posição de rolagem
Você pode ajustar a posição vertical da rolagem usando a propriedade block do argumento settings. Use valores como “start”, “center” ou “end” para identificar a parte do elemento de destino para rolar:
targetElement.scrollIntoView({ behavior: "smooth", block: "end" });
Adicionando Efeitos de Easing
Aplique efeitos de atenuação à animação de rolagem para criar uma transição mais natural e visualmente atraente. As funções de easing, como facilidade de entrada, facilidade de saída ou curvas cúbicas-bezier personalizadas, podem controlar a aceleração e a desaceleração do movimento de rolagem. Você pode usar uma função de temporização personalizada com a propriedade CSS scroll-behavior ou uma biblioteca JavaScript como “smooth-scroll” para obter o mesmo resultado.
html {
scroll-behavior: smooth;
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}
Certifique-se de que sua implementação de rolagem suave funcione de forma consistente em diferentes navegadores. Teste e lide com quaisquer peculiaridades ou inconsistências específicas do navegador que possam surgir.
Você pode usar um site como Eu posso usar para testar o suporte do navegador ao compilar. 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.
A rolagem suave adiciona um toque de elegância e aprimora a experiência do usuário criando um efeito de rolagem fluido e visualmente agradável. Seguindo as etapas descritas neste guia, os desenvolvedores da Web podem implementar a rolagem suave usando JavaScript.
Ajustar o comportamento de rolagem, adicionar efeitos facilitadores e garantir a compatibilidade entre navegadores aprimorará ainda mais a experiência de rolagem suave, tornando suas páginas da Web mais atraentes e agradáveis de navegar.