2009-01-23 15 views

cevap

22

Hızlı demo here

Temelde bütün ihtiyacınız

$('html, body').animate({ 
     scrollTop: $('#yourDiv').offset().top 
    }, 3000); 
+0

Evet bu iş gibi görünüyor olduğunu. Ancak tekrar tıklandığında sayfa bir pislik verir ve tekrar canlandırmaya çalışır. Div zaten görünür ve animasyon değil olup olmadığını kontrol etmek için bir yolu var mı? –

+0

JimmyP aşağıda yardım etti! – redsquare

+0

ama belki başka bir Q olarak daha iyi! – redsquare

8
$.extend($.expr[':'],{ 
    inView: function(a) { 
     var st = (document.documentElement.scrollTop || document.body.scrollTop), 
      ot = $(a).offset().top, 
      wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height(); 
     return ot > st && ($(a).height() + ot) < (st + wh); 
    } 
}); 

if ($('#whatever').is(':not(:inView)')) { 
    $('html,body').animate({ 
     scrollTop: $('#whatever').offset().top 
    }, 3000); 
} 
+2

+1 Wow .. Bu şimdiye kadar gördüğüm en okunabilir JS! –

+0

Animasyonlu kaydırma yapan genel bir jQuery eklentisi ilginizi çekebilir (ve ayrıca öğeler görünür olduğunda da hiç kaydırma yapmaz) http://erraticdev.blogspot.com/2011/02/jquery-scroll-into-view- plugin-with.html * scrollTo * eklentisine benzer, ancak daha basittir (daha hızlı) –

İlgili konular