Role até o topo da página usando JavaScript?


1594

Como rolar para o topo da página usando JavaScript? É desejável mesmo que a barra de rolagem salte instantaneamente para o topo. Não estou procurando uma rolagem suave.


2019, para evitar “Este site parece usar um efeito de posicionamento vinculado por rolagem. Isso pode não funcionar bem com o pan assíncrono ”use meu script stackoverflow.com/a/57641938/5781320
Constantin

Respostas:


2173

Se você não precisar alterar a animação, não precisará usar nenhum plug-in especial - eu apenas usaria o método JavaScript window.scrollTo nativo - passar 0,0 moverá a página instantaneamente para o canto superior esquerdo instantaneamente .

window.scrollTo(x-coord, y-coord);

Parâmetros

  • x-coord é o pixel ao longo do eixo horizontal.
  • y-coord é o pixel ao longo do eixo vertical.

176
Esse foi o meu ponto, se você não precisa animar a rolagem suave, não precisa usar o jQuery.
precisa saber é o seguinte

23
Engraçado que o comentário de jeff seja honesto para quem quer que as coisas funcionem em vários navegadores em 95% das vezes deveria usar o jQuery. Isso vem de alguém que tem que escrever um monte de javascript puro agora, porque não podemos permitir a sobrecarga de uma biblioteca abrandar código do anúncio :(
Will

11
Esta resposta não tem nada a ver com a pergunta. Seria bom se a pergunta fosse: Que script e métodos devo usar para rolar para o topo da página? A resposta correta está aqui: stackoverflow.com/questions/4147112/…
skobaljic

2
Trabalhando para mim no Firefox 40 e Chrome 44 (para o endereço comentário de Mikhail)
tony

10
Role até a parte inferior da páginawindow.scrollTo(0, document.body.scrollHeight);
emix

1346

Se você deseja uma rolagem suave, tente algo como isto:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Isso pega qualquer <a>marca href="#top"e torna a rolagem suave até o topo.


+1. Eu só estava me perguntando como fazer algo assim e o Google me levou aqui. Porém, onde está a função "scrollTop" nos documentos? Eu apenas olhei, mas não consegui encontrar.
Sqram 18/07/09

22
scrollTop não é função, é uma propriedade do elemento da janela
Jalal El-Shaer

1
Isso não funciona corretamente ao usar o retorno de chamada completo do animate, pois ele será executado duas vezes.
David Morales

5
"html" e "body" são necessários para a compatibilidade do navegador, ou seja, o Chrome v27 rola apenas "body" e o IE8 não. O IE8 rola apenas com "html", mas o Chrome v27 não.
SushiGuy

1
@jalchr Na verdade, window.pageYOffsetseria a propriedade do objeto e windowl̶e̶m̶e̶n̶t window da janela.
Alex W

176

Tente isso para rolar no topo

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

é o mesmo: if ('scrollRestoration' in history) {history.scrollRestoration = 'manual'; }
Vasilii Suricov 31/03/19

123

Melhor solução com animação suave:

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

Referência: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example


Você ainda pode precisar de apoio polyfill para o ScrollOptions(para determinados navegadores): github.com/iamdustan/smoothscroll
jneuendorf

Eu gosto muito desta solução.
SuperManEver

Alguém pode testar isso no Safari ou no Internet Explorer e ver se está funcionando bem? Obrigado
Fabio Magarelli 26/03

1
@FabioMagarelli Está funcionando bem no Safari, não testado no IE. Para testá-lo no safari, abra qualquer página que tenha rolagem e cópia e cole o código acima em Ferramentas do desenvolvedor -> Console; ele rolará para o topo verificado (Safari Versão 13.0.5).
Ganesh Ghalame 26/03

104

Você não precisa do jQuery para fazer isso. Uma tag HTML padrão será suficiente ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

12
+1 Isso é bom se você precisar navegar para um elemento específico e não apenas para o topo.
Ish

38
Use '<a href="#"> Topo </a>' para ir para o topo da página.
precisa saber é o seguinte

3
Este parece ser o melhor caminho a percorrer quando se trata de ZPE
Phil

Agradável! Existe uma maneira de fazer rolagem suave?
stallingOne

65

Todas essas sugestões funcionam muito bem para várias situações. Para aqueles que acham desta página através de uma pesquisa, também se pode dar esta uma tentativa. JQuery, sem plug-in, role para o elemento

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

47

rolagem suave, javascript puro:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

31
<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Editar:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

Outra maneira de rolar com a margem superior e esquerda:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

4
Você tem certeza de que a duração como string na função animar funciona?
Yogesh 9/03/16

Você não pode usar uma corda para a duração da animatefunção, em vez disso você deve usar: $('html, body').animate({scrollTop:(scroll_pos)}, 2000);
Kenny Alvizuris

1
Qual o sentido de colocar 0 entre parênteses? ((0)) irá simplesmente avaliar a 0.
Jack Vial

Sim @Jack, você pode.
Kamlesh

29
<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

em html

<a href="#top">go top</a>

28

Realmente estranho: esta questão está ativa há cinco anos e ainda não há resposta JavaScript baunilha para animar a rolagem ... Então, aqui está:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

Se desejar, você pode agrupar isso em uma função e chamar isso através do onclickatributo Verifique este jsfiddle

Nota: Essa é uma solução muito básica e talvez não seja a mais eficiente. Um exemplo muito elaborado pode ser encontrado aqui: https://github.com/cferdinandi/smooth-scroll


6
A pergunta pede explicitamente uma solução jQuery. por isso não é estranho
Will

2
Melhor solução para mim. Sem plugins, sem biblioteca jquery volumosa, apenas javascript simples. Kudos
user2840467

Cara, eu também criei essa mesma lógica XD depois de 5 anos, exatamente a mesma lógica, apenas valores são diferentes, como o intervalo de tempo e o número inteiro que estamos usando para subtrair, não consigo acreditar em XD. TBH, vim aqui para responder, mas ele já está lá, por isso sua resposta foi positiva.
Germa Vinsmoke

27

Se você quiser fazer uma rolagem suave, tente o seguinte:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

Outra solução é o método window.scrollTo do JavaScript:

 window.scrollTo(x-value, y-value);

Parâmetros:

  • O valor x é o pixel ao longo do eixo horizontal.
  • O valor y é o pixel ao longo do eixo vertical.

7
copycat ... ver usuários respostas ... Esta é apenas uma compilação dos top 2 respostas ....
Laurent B

essa é uma maneira legítima de usar o stackoverflow - é mais prático tê-lo em um só lugar. Joel Spolsky usou a reutilização de respostas existentes como um exemplo de como o stackoverflow deve funcionar em um ponto. Se você estiver interessado, eu posso tentar encontrar a publicação do blog
Edgar H

26

Com window.scrollTo(0, 0);é muito rápido
, tentei o exemplo de Mark Ursino, mas no Chrome nada acontece
e achei isso

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

testei todos os três navegadores e funciona
usando o blueprint css;
é quando um cliente clica no botão "Reservar agora" e não tem o período de locação selecionado, move-se lentamente para o topo onde estão os calendários e abre uma caixa de diálogo apontando para os 2 campos, depois de 3 segundos desaparece


Obrigado por apontar, você precisa segmentar html e body. Eu estava apenas fazendo isso para html e me perguntando por que não funcionou no Chrome.
Jared

A animação do corpo funciona no Safari, por isso estou atualizando sua resposta de acordo.
Dave DuPlantis

46
"Testou todos os 3 navegadores "? Midori, LuaKit e Konqueror, certo? : p
Anko

14
Por que não apenas $ ('html', 'body'). Animate ({scrollTop: 0}) em vez de adicionar duas linhas?
Matt Smith

23

Um monte de usuários recomendamos selecionar ambas as tags html e body para compatibilidade cross-browser, assim:

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

Isso pode atrapalhá-lo se você estiver contando com o retorno de chamada sendo executado apenas uma vez. De fato, ele será executado duas vezes porque você selecionou dois elementos.

Se isso é um problema para você, você pode fazer algo assim:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

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

A razão pela qual isso funciona é no Chrome $('html').scrollTop()retorna 0, mas não em outros navegadores, como o Firefox.

Se você não quiser esperar a animação ser concluída, caso a barra de rolagem já esteja no topo, tente o seguinte:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

19

O velho #toppode fazer o truque

document.location.href = "#top";

Funciona bem em FF, IE e Chrome


Agradável! Existe uma maneira de fazer rolagem suave?
stallingOne

você deve evitar soluções baseadas em navegação, consulte os comentários na resposta de Sriramajeyam.
Andrew Grothe

15

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>

</body>
</html>


3
Embora esse código pode responder à pergunta, fornecendo informações sobre como e por que ele resolve o problema melhora o seu valor a longo prazo
L_j

Explique sua resposta!
Ullas Hunka

Na página da web, qualquer usuário clicará no botão de rolagem superior e, em seguida, a página rolará para cima e com animação.
Arvinda kumar

Por que animate () em vez de jquery scroll ()?
Akin Hwan

14

Tente isto

<script>
    $(window).scrollTop(100);
</script>

14

$(document).scrollTop(0); também funciona.


2
Observe que quando você não usa o Firefox, isso não funciona. Você recebe um erro ao fornecer apenas um argumento (Erro: Argumentos insuficientes [nsIDOMWindow.scrollTo]).
Husky

14

Solução não jQuery / JavaScript puro:

document.body.scrollTop = document.documentElement.scrollTop = 0;


10

Tente este código:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => Dom Elemento para o qual você deseja mover a rolagem.

time => milissegundos, defina a velocidade do pergaminho.


9

Solução JavaScript pura:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

Eu escrevo uma solução animada no Codepen

Além disso, você pode tentar outra solução com a scroll-behavior: smoothpropriedade CSS .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

8

Por que você não usa a função embutida JQuery scrollTop:

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

Curto e simples!


Você só está faltando o link para o doc
Cyril Duchon-Doris

8

Você não precisa do JQuery. Simplesmente você pode chamar o script

window.location = '#'

ao clicar no botão "Ir para o topo"

Exemplo de demonstração:

output.jsbin.com/fakumo#

PS: Não use essa abordagem quando estiver usando bibliotecas modernas como angularjs. Isso pode ter quebrado o hashbang da URL.


9
Infelizmente, não é a melhor solução, pois nesse caso você está mudando fisicamente o local, em vez de rolar a página. Isso pode causar problemas se a localização for importante (no caso de usar o roteamento angular)
Yaroslav Rogoza

2
@YaroslavRogoza está correto. Embora possa funcionar em casos simples, eu não recomendaria esta solução. A localização está se tornando cada vez mais importante e os aplicativos de página única usam extensivamente o hash para lidar com a navegação. Você introduziria imediatamente um bug de efeito colateral ao adicionar a navegação baseada em hash após isso ou isso à navegação baseada em hash.
Andrew Grothe

8

Basta usar este script para rolar para o topo direto.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

7

Se você não quiser uma rolagem suave, poderá trapacear e interromper a animação de rolagem suave assim que iniciá-la ... assim:

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

Eu não tenho idéia se é recomendado / permitido, mas funciona :)

Quando você usaria isso? Não tenho certeza, mas talvez quando você queira usar um clique para animar uma coisa com o Jquery, mas faça outra sem animação? ou seja, abra um painel de login do administrador na parte superior da página e pule instantaneamente para o topo para vê-lo.


6

Motivação

Esta solução simples funciona nativamente e implementa uma rolagem suave para qualquer posição.

Evita o uso de links âncora (aqueles com #) que, na minha opinião, são úteis se você deseja vincular a uma seção, mas não são tão confortáveis ​​em algumas situações, especialmente quando apontam para o topo, o que pode levar a dois URLs diferentes que apontam para o mesmo local ( http://www.example.org e http://www.example.org/# ).

Solução

Coloque um ID na tag para a qual você deseja rolar, por exemplo, sua primeira seção , que responde a essa pergunta, mas o ID pode ser colocado em qualquer lugar da página.

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

Então, como um botão, você pode usar um link, basta editar o atributo onclick com um código como este.

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

Onde o argumento de document.getElementByIdé o ID da tag para a qual você deseja rolar após clicar.


Te agradece! é uma ótima solução #
Hugo Stiven Laguna Rueda

@HugoStivenLagunaRueda, seja bem-vindo, eu o encontrei na MDN, então, graças à Mozilla. É incrível quantas coisas já existem, suportadas nativamente. Eu amo baunilha JS.
Gianluca Casati


4

Você pode tentar usar o JS como neste Fiddle http://jsfiddle.net/5bNmH/1/

Adicione o botão "Ir para o topo" no rodapé da página:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

4
function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

4

Nenhuma das respostas acima funcionará no SharePoint 2016.

Tem que ser feito assim: /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.