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 .

javascript jquery html pageload page-refresh Lua
fonte

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

Ryan

165

Você pode fazer isso usando o método scrollTop no DOM pronto :

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

Pat
fonte

9

Não funciona no Safari. Mas isso -> stackoverflow.com/a/18633915/102133 faz.

Ben

165

Para uma implementação JavaScript simples e simples :

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

Expandir snippet

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

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

Respostas: