Ir para o topo da página usando JavaScript / jQuery?

Se queres deslizar suavemente, tenta algo assim:

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

Isso vai levar qualquer marca <a> cuja href="#top" e torná-la suave rolar para o topo.

Tente isto para se deslocar no topo

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

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

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

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

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

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

Em html

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

Se quiser fazer a rolagem suave, por favor tente isto:

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

Outra solução é a janela de JavaScript.método de posicionamento:

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

Parâmetros:

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

Com window.scrollTo(0, 0); é muito rápido
então eu tentei o exemplo de Mark Ursino, mas no cromado nada acontece
e encontrei isto.

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

Testou todos os 3 navegadores e funciona
estou a usar o modelo css
isto é quando um cliente clica no botão" Livro agora " e não tem o período de aluguer seleccionado, move-se lentamente para o topo onde estão os calendários e abre uma janela que aponta para os 2 campos, depois do 3sec desaparece

A Lote de apoio os utilizadores recomendam a selecção das marcas de html e de corpo para compatibilidade com o navegador cruzado, como por exemplo:

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

Se isso é um problema para ti, podes 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 isto funciona é no Chrome $('html').scrollTop() devolve 0, mas não em outros navegadores, como Graca.

Se não quiser esperar que a animação termine no caso de a barra de posicionamento já estar no topo, tente isto:

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

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

    callback();
}

Realmente estranho: esta pergunta está activa há cinco anos e ainda não há nenhuma resposta de vanilla JavaScript para animar a rolagem ... então aqui vai:

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 quiser, pode embrulhar isto numa função e chamá-lo através do atributo onclick. Verifique isto jsfiddle

O velho #top pode fazer o truque

document.location.href = "#top";

Funciona bem em FF, IE e cromado

Tenta isto

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

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

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

Editar:

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

Solução Não-jQuery / JavaScript puro:

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

Isto vai funcionar.:

window.scrollTo(0, 0);

Tenta este código:

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

Div = > Dom elemento onde deseja mover o pergaminho.

Tempo = > milisegundos, define a velocidade do pergaminho.

Porque é que não usas o scrollTop da função JQuery inbuilt:

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

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

window.location = '#'

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

Amostra demo:

Output.jsbin.com/fakumo#

PS: não use esta abordagem, quando você está usando bibliotecas modernas como angularjs. Isso pode ter quebrado a URL hashbang.

Você poderia simplesmente usar um alvo do seu link, como #someid, onde # someid é o id do div.

Ou, você poderia usar qualquer número de plugins rolantes que tornam isto mais elegante.

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

Basta usar este programa para deslocar para o topo directo.

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

Podes tentar usar JS como neste Violino http://jsfiddle.net/5bNmH/1/

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

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

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

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

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

Motivação

Esta solução simples funciona nativamente e implementa um pergaminho suave para qualquer posição.

Em Que evita o uso de links âncora (aqueles com #) que, na minha opinião, são úteis quando se deseja criar um link para uma seção, mas não são tão confortáveis em algumas situações, especialmente quando a apontar para cima, o que poderia levar a duas diferentes URLs apontando para o mesmo local (http://www.example.org e http://www.example.org/#).

Solução

Coloque um id na etiqueta para a qual deseja deslocar, por exemplo a sua primeira secção , que responde a esta pergunta, mas o id pode ser colocado em toda a parte 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 uma ligação, 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 marca que você quer rolar para depois do clique.

Active todo o navegador. Boa sorte.

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }

Tenta isto

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>