jQuery .scrollTop (); + animação


171

Defino a página para rolar para o topo quando um botão é clicado. Mas primeiro usei uma instrução if para ver se a parte superior da página não estava definida como 0. Então, se não for 0, animar a página para rolar para o topo.

var body = $("body");
var top = body.scrollTop() // Get position of the body

if(top!=0)
{
  body.animate({scrollTop:0}, '500');
}

A parte complicada agora é animar algo APÓS a página rolar para o topo. Então, meu próximo pensamento é descobrir qual é a posição da página. Então, eu usei o log do console para descobrir.

console.log(top);  // the result was 365

Isso me deu o resultado do 365, acho que esse é o número da posição em que eu estava pouco antes de rolar para o topo.

Minha pergunta é como defino a posição como 0, para poder adicionar outra animação que é executada quando a página está em 0?

Obrigado!


1
é necessário que os botões nos quais você dispara o evento estejam sempre visíveis? Se não, então eu tenho um código que não precisa de nenhum tipo de condição que pode ser fazer fácil para a sua primeira condição
The Mechanic

1
Não deve haver aspas em torno dos milissegundos. A "string" a documentação refere-se são o / lenta rápido
mplungjan

Respostas:


313

Para fazer isso, você pode definir uma função de retorno de chamada para o comando animar, que será executado após a conclusão da animação de rolagem.

Por exemplo:

var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

Onde está esse código de alerta, você pode executar mais javascript para adicionar mais animação.

Além disso, o 'swing' está lá para definir a flexibilização. Confira http://api.jquery.com/animate/ para obter mais informações.


1
Obrigado Thomas, era disso que eu precisava. Também adicionei um atraso, já que a turma é adicionada tão rapidamente. if (top! = 0) {console.log ("rolagem oculta"); body.animate ({scrollTop: 0}, '500', 'swing', function () {console.log ("Animação concluída"); leftitems.delay (1000) .removeClass ("slide");}); }
Juan Di Diego

5
Não tenho certeza se é porque este post tem 4 anos, mas acho que nas versões mais recentes do jQuery você precisa remover essas aspas ao redor do tempo: body.animate ({scrollTop: 0}, 500, 'swing', function () {alert ("animação concluída");});
Andrew

27
A propósito, seu retorno de chamada será executado duas vezes, porque você selecionou dois elementos.
Big McLargeHuge

8
Thomas fez questão de adicionar corpo e html. Caso 1. Corpo de leitura do Chrome e srolling, o FIrefox precisa de html para fazer isso.
Fear1 de

4
Apenas tentei - $ ('html') não funciona no Chrome e $ ('body') não funciona no Firefox, então $ ('html, body') é necessário. E também chamar .stop () é uma coisa boa - tentei chamar animar várias vezes rapidamente no chrome e depois disso não consegui rolar a página.
Lev Lukomsky

54

Tente este código:

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

8
$("html")deve ser usado, porque no seu caso, se você adicionar uma função de retorno de chamada, ela será chamada duas vezes, uma para html e outra para body . E usar o corpo não faz nada.
flawyte

10
parece que depende do navegador. em alguns casos, $ ('html') pode não fazer nada; portanto, você precisa usar os dois e cuidar do retorno de chamada acionado duas vezes.
commonpike

31

Usa isto:

$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
    }

});

8

para isso, você pode usar o método de retorno de chamada

body.animate({
      scrollTop:0
    }, 500, 
    function(){} // callback method use this space how you like
);

7

Tente isso:

var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
       body.animate({scrollTop :0}, 500,function(){
         //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
          alert('Hello');
      });
}

5

Solução simples:

rolando para qualquer elemento por ID ou NAME:

SmoothScrollTo("#elementId", 1000);

código:

function SmoothScrollTo(id_or_Name, timelength){
    var timelength = timelength || 1000;
    $('html, body').animate({
        scrollTop: $(id_or_Name).offset().top-70
    }, timelength, function(){
        window.location.hash = id_or_Name;
    });
}

' timelength ' já foi passado como parâmetro, portanto, não é necessário declará-lo com 'var'. Uma 'edição' desta resposta não foi possível, pois tinha menos de 6 caracteres! ;-) +1
Anthony Walsh

@AnthonyWalsh de jeito nenhum afaik. varé necessário não para substituir o global (se não existir variável global com esse nome)
T.Todua

É justo ;-) Estou usando o TypeScript e passando um número diretamente como parâmetro para o timelength, para que todo o escopo local seja o meu caso. Felicidades!
Anthony Walsh

4

Código com função de clique ()

    var body = $('html, body');

    $('.toTop').click(function(e){
        e.preventDefault();
        body.animate({scrollTop:0}, 500, 'swing');

}); 

.toTop= classe do elemento clicado talvez imgoua


4
jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() { 
       alert("Finished animating");
    });

0

você deve ver isso

$(function () {
        $('a[href*="#"]:not([href="#"])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });

ou experimentá-los

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

0
$("body").stop().animate({
        scrollTop: 0
    }, 500, 'swing', function () {
        console.log(confirm('Like This'))
    }
);

0

você pode usar a classe CSS ou o código HTML; para mantê-lo simétrico, sempre uso a classe CSS, por exemplo

<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a> 
|
|
|
<section class="section-plans js--section-plans clearfix">
$(document).ready(function () {
    $('.js--scroll-to-plans').click(function () {
        $('body,html').animate({
            scrollTop: $('.js--section-plans').offset().top
        }, 1000);
        return false;})
});
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.