Rolar até o topo da página é uma função comum em desenvolvimento web, especialmente em sites com conteúdo longo. Uma solução eficaz para essa necessidade é utilizar o método globalThis.scrollTo em JavaScript. Neste artigo, vamos explorar como usar essa função e os benefícios dessa abordagem.
Por que usar o globalThis.scrollTo?
O método scrollTo pode ser chamado a partir de diferentes contextos globais. globalThis é uma adição recente ao ECMAScript que fornece uma maneira uniforme de acessar o objeto global, independentemente do ambiente onde o JavaScript está sendo executado (navegador, Node.js, web workers, etc.). Usar globalThis garante que seu código seja mais consistente e universalmente aplicável.
Implementação Básica
Para rolar até o topo da página, você pode usar o seguinte código JavaScript:
globalThis.scrollTo({ top: 0, left: 0, behavior: 'smooth' });Explicação do Código:
- globalThis.scrollTo é o método que permite rolar a janela para uma posição específica.
- { top: 0, left: 0, behavior: ‘smooth’ } é um objeto de configuração onde:
- top: 0 define a posição de rolagem no topo da página.
- left: 0 garante que a rolagem ocorra também horizontalmente para a posição zero (a extremidade esquerda da página).
- behavior: ‘smooth’ garante que a rolagem seja suave, melhorando a experiência do usuário.
Adicionar left: 0 é importante porque assegura que, além da rolagem vertical, qualquer rolagem horizontal também seja redefinida para a posição inicial. Isso é particularmente útil em páginas que permitem a rolagem horizontal, garantindo que o usuário seja levado ao canto superior esquerdo da página.
Integração com um Botão “Voltar ao Topo”
Uma maneira prática de implementar essa funcionalidade é adicionar um botão “Voltar ao Topo”. Aqui está um exemplo de como fazer isso:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll to Top Example</title>
<style>
#scrollBtn {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Conteúdo da página -->
<button id="scrollBtn" onclick="scrollToTop()">Voltar ao Topo</button>
<script>
const scrollBtn = document.getElementById('scrollBtn');
globalThis.onscroll = function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollBtn.style.display = 'block';
} else {
scrollBtn.style.display = 'none';
}
};
function scrollToTop() {
globalThis.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
}
</script>
</body>
</html>Explicação do Código:
- Estilo do Botão: O botão é posicionado no canto inferior direito da página e é escondido inicialmente (display: none).
- Evento de Rolagem: Quando o usuário rola a página, uma função verifica a posição de rolagem e mostra ou esconde o botão conforme necessário.
- Função scrollToTop: Essa função é chamada quando o botão é clicado, rolando a página suavemente para o topo.
Benefícios do Uso de globalThis
- Consistência: Garante que o código funcione de maneira consistente em diferentes ambientes JavaScript.
- Compatibilidade: É especialmente útil em projetos que podem ser executados tanto no lado do cliente quanto no lado do servidor.
- Confiabilidade: Reduz o risco de erros relacionados ao contexto global, melhorando a robustez do código.
See the Pen Como Rolar para o Topo da Página Usando JavaScript by Massao Kuroiwa (@massaokuroiwa) on CodePen.
Rolar para elementos id específicos
Se você quiser rolar a página para uma seção específica, onde a coordenada absoluta pode mudar conforme o layout da página muda, é melhor usar uma âncora.
Você vai precisar de um elemento com um id para que isso funcione, como <section id=”titulo”>Este é o título da minha página.</section>
document.getElementById("titulo").scrollIntoView({ behavior: "smooth" });Botão para rolar para o elemento id específico
Em vez de rolar automaticamente, se você quiser que o usuário possa clicar em um botão para rolar para cima, este é o código que você pode adicionar ao seu HTML:
<section id="titulo">Este é o título da minha página.</section>
<button onClick="document.getElementById('titulo').scrollIntoView({ behavior: 'smooth'});">
Voltar ao topo
</button>Conclusão
Utilizar o método globalThis.scrollTo em JavaScript é uma maneira eficaz de melhorar a navegação no seu site, garantindo consistência e compatibilidade em diferentes ambientes. Implementando um botão “Voltar ao Topo”, você proporciona uma experiência de usuário mais amigável e acessível. Explore essa técnica para tornar seu site mais dinâmico e fácil de usar.
