jQuery .scrollTop(); + animasyon

Bir düğmeye tıklandığında sayfayı en üste kaydıracak şekilde ayarladım. Ama önce sayfanın üst kısmının 0 olarak ayarlanıp ayarlanmadığını görmek için bir if deyimi kullandım. 0 değilse, sayfayı en üste kaydırmak için canlandırıyorum.

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

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

Şimdi işin zor kısmı, sayfa yukarı kaydırıldıktan SONRA bir şeyi canlandırmak. Bu yüzden bir sonraki düşüncem, sayfa konumunun ne olduğunu bulmak. Bu yüzden öğrenmek için konsol günlüğünü kullandım.

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

Bu bana 365 sonucunu verdi, sanırım en üste kaydırmadan hemen önce bulunduğum konum numarası buydu.

Sorum şu: Sayfa 0'a geldiğinde çalışan başka bir animasyon ekleyebilmek için konumu nasıl 0 olarak ayarlayabilirim?

Teşekkürler!

Programlama
jquery jquery-animate scrolltop
2013ööp28öö4 Mayıs 2013 в 4:28
38 görünümler
Çözüm

Bunu yapmak için, animate komutu için kaydırma animasyonu bittikten sonra çalışacak bir geri arama işlevi ayarlayabilirsiniz.

Örneğin:

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

Bu uyarı kodunun olduğu yerde, daha fazla animasyon eklemek için daha fazla javascript çalıştırabilirsiniz.

Ayrıca, 'salınım' gevşemeyi ayarlamak için vardır. Daha fazla bilgi için http://api.jquery.com/animate/ adresine göz atın.

mplungjan
Edited answer 2017ööp18öö7 Mayıs 2017 в 7:18
Yorumlar (7)

Onun yerine bunu dene:

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');
      });
}
mplungjan
Edited answer 2017ööp19öö7 Mayıs 2017 в 7:19
Yorumlar (0)

bunun için geri arama yöntemini kullanabilirsiniz

body.animate({
      scrollTop:0
    }, 500, 
    function(){} // callback method use this space how you like
);
mplungjan
Edited answer 2017ööp20öö7 Mayıs 2017 в 7:20
Yorumlar (0)