Forçar a posição de rolagem da página para cima na atualização da página em HTML

129

Estou construindo um site que estou publicando com divs. Quando atualizo a página após a rolagem para a posição X, a página é carregada com a posição de rolagem como X.

Como forçar a rolagem da página para cima na atualização da página?

  • O que eu consigo pensar é em alguns JS ou jQuery executados como onLoad()função da página para SET, as páginas rolam para o topo. Mas eu não sei como eu poderia fazer isso.

  • Uma opção melhor seria se houver alguma propriedade ou algo para carregar a página com sua posição de rolagem como padrão (por exemplo, na parte superior), que será como o carregamento da página , em vez da atualização da página .

Lua
fonte
Surpreendentemente, nenhuma das soluções aqui funcionou para mim, mas este fez: stackoverflow.com/a/11486546/470749
Ryan

Respostas:

165

Para uma implementação JavaScript simples e simples :

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}

ProfNandaa
fonte
1
Essa é a resposta correta. A solução jQuery não funciona em todos os casos.
Harry Stevens
@ Paul12_ - Acabei de testar Safari 11.0.3e funciona bem para mim, qual você está usando?
ProfNandaa
Isto não funcionou para mim. Eu tive que retornar da função onbeforeload para fazê-la funcionar.
Iqbal
@Iqbal - o que você fez return?
ProfNandaa
1
adicionar também document.querySelector('html').style.scrollBehavior = '';pode ser necessário. Se foi definido como smooth, pode não chegar ao topo antes da página ser recarregada.
Kevnk 17/10/19
35

A resposta aqui não funciona para o safari, document.ready geralmente é acionado muito cedo.

Deveria usar o beforeunloadevento que o impede de fazer alguma coisasetTimeout

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});
Ben
fonte
1
Adicionar após a função de rolagem: $ ('html'). Text (''); , então o carrinho de bebê será redefinido
user956584
1
@Userpassword Você não acha que $ ("html"). Remove () seria melhor?
Ben
18

Novamente, a melhor resposta é:

window.onbeforeunload = function () {
    window.scrollTo(0,0);
};

(isso não é jQuery, procure se você estiver procurando pelo método JQ)

EDIT: um pequeno erro é "onbeforunload" :) O Chrome e outros navegadores "lembram" a última posição de rolagem antes do descarregamento, portanto, se você definir o valor em 0,0 imediatamente antes do descarregamento da sua página, ele lembrará 0,0 e ganhou volte para onde estava a barra de rolagem :)

xoxel
fonte
@ Paul12_ O Safari precisa document.documentElement.scrollTopfuncionar. Eu normalmente uso os dois.
Graham O'Mahony 10/10
9

Verifique a .scrollTop()função jQuery aqui

Seria algo como

$(document).load().scrollTop(0);
jon3laze
fonte
9

Você também pode tentar

$(document).ready(function(){
    $(window).scrollTop(0);
});

Se você quiser rolar na posição x, poderá alterar o valor de 0 para x.

Ankit
fonte
7

Em vez de location.reload(), basta usar location.href = location.href. Ele não irá rolar para a posição anterior como location.reload()faz.

Nota: Isso não será recarregado se houver algum # no URL

Nauphal
fonte
4
<script> location.hash = (location.hash) ? location.hash : " "; </script>

Coloque o script acima na <head>tag do seu html. Não sabe ao certo como os aplicativos de página única se comportam! Mas com certeza funciona como charme em páginas regulares.

harshes53
fonte
4

A resposta aqui (rolando para dentro $(document).ready) não funcionará se houver um vídeo na página. Nesse caso, a página é rolada após esse evento ser disparado, substituindo nosso trabalho.

A melhor resposta deve ser:

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});
DrPollit0
fonte
3
$(document).ready(function(){
    $(window).scrollTop(0);
});

não funcionou para mim, pois o google chrome apenas rolaria para baixo após o carregamento da página. O que eu usei foi

$(document).ready(function() {
    var url = window.location.href;
    console.log(url);
    if( url.indexOf('#') < 0 ) {
        window.location.replace(url + "#");
    } else {
        window.location.replace(url);
    }
});

// Isso carrega a página com um # no final. Por isso, sempre será carregado no topo.

Daut
fonte
3

Para redefinir a janela, role de volta para o topo, $(window).scrollTop(0)no evento beforeunload faz os truques, no entanto, eu testei no Chrome 80, ele voltará ao local antigo após o recarregamento.

Para evitar isso, defina history.scrollRestorationcomo "manual".

//Reset scroll top

history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
      $(window).scrollTop(0);
});
Alex se divertindo
fonte
Esta é a melhor resposta para mim, funciona em Chrome / Linux
SNS - Web et Informatique
0

A resposta supercalifragilisticexpialidocious é:

adicione isso na parte superior do seu arquivo js ou tag de script

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari
Nicobels
fonte