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

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.

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.

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.

Tente isso para rolar no topo

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

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ê 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>

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);

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));
    }
})();

<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' });

<script>

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

em html

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

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

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.

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

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();
}

O velho #toppode fazer o truque

document.location.href = "#top";

Funciona bem em FF, IE e Chrome

Tente isto

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

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

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

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

Isso funcionará:

window.scrollTo(0, 0);

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.

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;
    }
}

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ê 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.

Basta usar este script para rolar para o topo direto.

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

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.

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.

Você pode simplesmente usar um destino no seu link, como #someid, em que #someid é o ID da div.

Ou você pode usar qualquer número de plugins de rolagem que tornem isso mais elegante.

http://plugins.jquery.com/project/ScrollTo é um exemplo.

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>

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;
    });
}

Nenhuma das respostas acima funcionará no SharePoint 2016.

Tem que ser feito assim: /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;