Atualização da Página sem Redefinir a Posição de Rolagem: Uma Solução
Resposta Rápida
Para manter a posição de rolagem em uma página durante a atualização, você pode usar o sessionStorage. Registre a posição atual no eixo Y antes da atualização da página e, em seguida, restaure-a depois:
// Saindo? Vamos lembrar onde você parou.
window.onbeforeunload = () => sessionStorage.setItem('scrollPos', window.scrollY);
// Bem-vindo de volta! Salvamos sua posição.
window.onload = () => window.scrollTo(0, sessionStorage.getItem('scrollPos') || 0);Esse método é simples e direto. Ele é especialmente útil para preservar o estado da interface do usuário após uma atualização da página.
Métodos Adicionais
Se o JavaScript Estiver Desativado
Se o JavaScript estiver desativado ou não funcionar, não se preocupe! Basta adicionar a posição de rolagem aos parâmetros da URL:
<a href="sua-pagina.html?scroll=1000">Atualizar</a>Veja como fazer isso com HTML, sem JavaScript:
<body onload="window.scrollTo(0, location.search.split('scroll=')[1])">Quem disse que você não pode se virar sem JavaScript? Há uma solução mesmo sem ele.
Método jQuery
Para os entusiastas do jQuery, aqui está uma abordagem alternativa:
// Saindo? Não esqueça de levar sua posição de rolagem!
$(window).on('beforeunload', function() {
var scrollPosition = $(document).scrollTop();
sessionStorage.setItem('scrollPos', scrollPosition);
});
// Vamos começar restaurando a posição de rolagem!
$(window).on('load', function() {
if (sessionStorage.scrollPos) {
$('html, body').scrollTop(sessionStorage.getItem('scrollPos'));
}
});Essa abordagem com jQuery oferece uma melhor legibilidade.
Manipulando Conteúdo Dinâmico
Se a página contiver conteúdo dinâmico que pode mudar durante o carregamento, não se preocupe. Restaure a posição de rolagem após a página ter sido completamente carregada:
window.onload = () => {
setTimeout(() => {
// Dê tempo para a página carregar completamente.
window.scrollTo(0, sessionStorage.getItem('scrollPos') || 0);
}, 100); // Ajuste o atraso se necessário.
};Um pouco de paciência garantirá uma restauração perfeita da posição de rolagem.
Aplicação Confiável
Limpando o Session Storage
Muita informação no sessionStorage? Mantenha tudo organizado:
window.onload = () => {
const savedPos = sessionStorage.getItem('scrollPos');
if (savedPos) {
window.scrollTo(0, savedPos);
// Limpe após você mesmo!
sessionStorage.removeItem('scrollPos');
}
};Isso ajuda a manter a ordem e o conforto no uso do session storage.
sessionStorage vs. localStorage
Use o sessionStorage para armazenamento de dados temporários. Uma nova aba significa uma nova sessão. O localStorage é destinado a armazenamento de dados a longo prazo, mas usá-lo para salvar posições de rolagem pode não ser a melhor abordagem.
Atualização Manual da Página Mantendo a Posição de Rolagem
Se você precisar atualizar a página manualmente e manter a posição de rolagem atual, veja como fazer:
function atualizarPaginaComPosicaoDeRolagem() {
var currentScroll = window.scrollY;
// Atualize a página mantendo a posição de rolagem!
document.location.href = `sua-pagina.html?scroll=${currentScroll}`;
}Se usar o sessionStorage não atende às suas necessidades, você pode optar pelo registro na URL.
Visualização
Vamos visualizar uma página da web como um trajeto:
Trajeto:
[🏞️ Início] ---- (rolagem) ---- [🌲 Meio do Caminho] ---- (continuação) ---- [🏔️ Cume]Após a atualização, você chegou:
✨ Após a Atualização ✨
[🏞️ Início] // Voltamos ao início.Mas se você aplicou JavaScript:
// Marque um ponto de referência antes de sair.
window.sessionStorage.setItem('scrollPosition', window.scrollY);
// Após a atualização, voltaremos ao ponto marcado.
window.scrollTo(0, window.sessionStorage.getItem('scrollPosition'));E agora o trajeto se lembra de você:
⚡️ Após a Atualização ⚡️
[Você retornou a: 🏔️ Cume] // Posição de rolagem salva!Volte e continue sua jornada de onde parou.
Gerenciando Rolagem com scrollRestoration
Para a melhor experiência do usuário, utilize o recurso history.scrollRestoration:
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}Isso lhe dará total controle sobre a rolagem da página e melhorará a interação do usuário com o site.
Solução Completa para Atualização de Página
Se uma atualização completa da página for necessária:
window.onbeforeunload = () => {
sessionStorage.setItem('scrollPos', window.scrollY);
// Às vezes, você precisa fazer movimentos ousados!
document.location.reload(true);
};Isso ajuda a deixar uma marca pessoal mesmo durante uma atualização completa da página com limpeza de cache.
Compatibilidade e Desempenho
Não confie totalmente em bibliotecas de terceiros. A performance e a compatibilidade com navegadores devem ser priorizadas. Nem toda estratégia funcionará da mesma forma em diferentes navegadores.
Recursos Úteis
- Propriedade scrollRestoration no Objeto History — para uma compreensão profunda da API
scrollRestoration. - Método Window.scrollTo() — uma referência para gerenciar a posição de rolagem com
scrollTo(). - Criando Animações CSS de Alto Desempenho — mantendo a posição de rolagem durante animações para um desempenho otimizado.
- API History - Restaurando a Posição de Rolagem — gerenciando a posição de rolagem usando a API History.