Como pular para o topo da página do navegador

186

Estou escrevendo um pop-up modal e preciso que o navegador pule para o topo da tela quando o botão modal aberto for pressionado. Existe uma maneira de rolar o navegador para o topo usando o jQuery?

— Exitos
fonte

405

Você pode definir o scrollTopseguinte:

$('html,body').scrollTop(0);

Ou se você quiser uma pequena animação em vez de um snap no topo:

$('html, body').animate({ scrollTop: 0 }, 'fast');

— Nick Craver
fonte

1

bom ... Eu usei scrollTo plugin para jQuery antes de fazer isso - poderia ter salvo um pouco de código com o seu código ... obrigado pela lição ;-)

— Zathrus Escritor

@MikhailBatcer - desative seu CSS e veja se ele funciona. Você pode ter um problema com o estilo das suas tags htmle body. caso contrário, use em seu $(window)lugar.

— invot

como adicionar duração para skrolling de animação?

— Maxim Strutinskiy 6/12/19

139

Sem animação, você pode usar JS simples:

scroll(0,0)

Com animação, verifique a resposta de Nick .

— Ionuț Staicu
fonte

4

Isso é suportado em todos os navegadores?

— Pacerier 27/05

1

scrollestá no padrão CSSOM enquanto scrollTofoi originalmente definido no DOM Nível 0 e não faz parte de nenhum padrão. No entanto, o CSSOM inclui scrollTopara compatibilidade com versões anteriores.

— Clint Pachl

3

Eu acho que scrollé amplamente suportado. Veja stackoverflow.com/q/1925671/41906

— Clint Pachl

Obrigado. Eu acho que window && window.scroll(0,0);é aceitável no meu modelo de exibição.

— Nrodic

34

Se você estiver usando a caixa de diálogo da interface do usuário do jQuery, poderá apenas estilizar o modal para que ele apareça com a posição fixada na janela para que não apareça fora da vista, negando a necessidade de rolar. De outra forma,

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

deve fazer o truque.

— Silkster
fonte

13

Você poderia fazer isso sem javascript e simplesmente usar tags de âncora? Então seria acessível para aqueles js grátis.

apesar de você estar usando modais, presumo que você não se importe em ser livre de js. ;)

— S.Kiers
fonte

1

O uso de tags âncora interromperia a navegação baseada em hash.

— Tom Landau

2

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

Expandir snippet

— Waruna Manjula
fonte

2

Eu sei que isso é antigo, mas para aqueles com problemas no Edge:

JS simples: window.scrollTop=0;

Infelizmente, scroll()e scrollTo()gere erros no Edge.

— Josh Powlison
fonte

1

você estiver usando a caixa de diálogo da interface do usuário do jQuery, você pode apenas estilizar o modal para que ele apareça com a posição fixa na janela, para que não apareça fora da vista, negando a necessidade de rolar. De outros

— gary
fonte

0

Solução Javascript pura

theId.onclick = () => window.scrollTo(top: 0)

Se você quiser uma rolagem suave

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })

— Moghazi
fonte