Torne seus links da mesma página um pouco mais agradáveis ​​de usar com esse efeito nativo de rolagem suave.

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.

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.
    • instagram viewer
  • 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 mover-se 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.

html>
<htmllang="en">
<head>
 <metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head>


<body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav>


<sectionid="section1">
<h2>Section 1h2>
section>


<sectionid="section2">
<h2>Section 2h2>
section>


<sectionid="section3">
<h2>Section 3h2>
section>


<scriptsrc="./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 a estilo.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}


nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}


navul {
display: flex;
gap: 10px;
justify-content: center;
}


navulli {
list-style: none;
}


navullia {
border-radius: 5px;
border: 1.5pxsolid#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 embutido 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 script.js arquivo. 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 está totalmente carregado e está pronto para manipular.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

A seguir, defina o makeLinksSmooth() função. Comece selecionando as tags de âncora na navegação, pois você deseja modificar o comportamento delas. Em seguida, itere cada link e adicione um ouvinte de evento para seu evento de clique.

functionmakeLinksSmooth() { 
const navLinks = document.querySelectorAll("nav a"); 
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

Por fim, defina o smoothScroll() função que recebe um objeto ouvinte de eventos. 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 scrollIntoView método e passe o comportamento "suave" em um parâmetro de objeto para completar o efeito.

functionsmoothScroll(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.

Você pode ajustar a posição vertical da rolagem usando o bloquear propriedade 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. Funções de easing, como facilidade de entrada, facilidade de saída ou personalização curvas cúbicas-bezier pode controlar a aceleração e 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.

/* 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 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 de easing e garantir a compatibilidade entre navegadores melhorar ainda mais a experiência de rolagem suave, tornando suas páginas da web mais envolventes e agradáveis navegar.